getButterfly Logo getButterfly code wrangling since 2005

CSS Multiple Borders

Here’s a simple way to apply multiple borders to a paragraph, section or a block element.

.mydiv {
    border: 10px solid #F8F8F8;
    outline: 1px dashed #e4e4e4;

By multiple you should understand two borders, which is enough for most cases, and I’m sure this tip will help lots of users.

The outline element won’t work in IE6/7, but I don’t really care, as IE6 has been discontinued, and IE7 will be discontinued.

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a reply

Love programming?

Learn about the most amazing things. Get smarter everyday!