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 *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>