CSS Solid Box Shadows
In effect this is a kind of pseudo-border, which has the advantage that it does not alter the dimensions or layout of the element.
box-shadow: 0 0 0 10px orange;
produces a ‘border’ all round, outside the box, but does not alter the box’s placement:
The box-shadow can be inset, like so
box-shadow: inset 0 0 0 10px orange;
Altering the code to
box-shadow: 0 10px 0 0 orange;
gives a bottom ‘border’:
Again, this can be inset (note the negative value)
box-shadow: inset 0 -10px 0 0 orange;
Here are some commonly used styles:
0 10px 0 0 violet;
inset 0 -10px 0 0 violet;
0 -10px 0 0 violet;
inset 0 10px 0 0 violet;
-10px 0 0 0 violet;
inset 10px 0 0 0 violet;
10px 0 0 0 violet;
inset -10px 0 0 0 violet;
Comma-separating different box-shadow values will produce multiple box-shadows — some can be inset, and some can be deliberately overlaid to produce any number of surrounding solid shadows
Note the trickery with the content colour — I have used
mix-blend-mode: difference;
It alters the colour based on the background — in this case helping to make the text legible over the violet. I’ll write more on this some other time.
Enjoy!