The HTML:
[html]
<div class="double-border">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</div>
[/html]
… And the CSS:
[css].double-border
{
padding: 8px;
<span style="color: #ff0000;">border: solid 6px #ff8000;</span>
<span style="color: #ff0000;"> -moz-box-shadow: 0 0 0 6px #0f0;</span>
<span style="color: #ff0000;"> -webkit-box-shadow: 0 0 0 6px #0f0;</span>
<span style="color: #ff0000;"> box-shadow: 0 0 0 6px #0f0;</span>
width: 200px;
float: left;
margin: 8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}[/css]
What we actually do is to set shadow’s x-offset, y-offset and the shadow blur to zero and set color for the shadow and in this manner to emulate a solid color border to the element:
[css]
-moz-box-shadow: 0 0 0 6px #0f0;
[/css]
This will render a solid color 6-pixel wide shadow that can be used as an outer border of the element. The inner border is set via the classic:
[css]
border: solid 6px #ff8000;
[/css]
What is important in this solution is that we also need to set margin to the element that is equal or bigger than the shadow spread, otherwise the adjacent elements will be overlapped by the border we have emulated from a box-shadow.
If you like the example you can download it too. Find more experiments here.
© 2006 - 2023 Martin Ivanov