CSS Double Border

Today I came across an interesting prospect – How to emulate a double border using only CSS.

This can be achieved with the :before and :after pseudo selectors.

xhtml

<div id="myDiv">Some Text Here</div>

CSS

#myDiv, #myDiv:after {
    display:block;
    background:#00f;
    width:100px;
}

#myDiv:after {
    content:" ";
    border-top:1px solid #FFF;
    border-bottom:3px solid #000;
}

Preview it here: http://jsfiddle.net/2BQ8f/

This entry was posted in Web Development and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *