Fake border gradient
Fake border gradient using ::before
pseudo element. The main .container
div
is used as the gradient border by using linear-gradient
as the background of this div
. Then the pseudo element is used as the content background which is white in color with 1px
margin from all the sides so that only 1px
of the .container
div is shown. This creates a fake gradient border.
This will work in all the major browsers except IE8 because it doesn't support gradients yet. Take a look at the code to learn more about it.