How to make double borders with CSS

Posted in on 22 January 2007

When you have a website deadline, it's quite easy to fall into the 'trap' of sticking with tried and tested cascading style sheet (CSS) methods that you know and love. However, it can also be useful to try out CSS properties that you are not so familiar with. For me, this used to be the case with the border property. I used solid borders almost exclusively until I discovered that there were other possibilities including double borders [Ed: you need to get out more].

In fact, it's quite easy to create double borders with CSS because you can use the border property and assign a style of 'double'. Choose a border width of 3px or more and a color and there you have it!

For example, this style rule gives a double border:

  .double {
      border: 3px double #999;
  }

This is a paragraph with a 3px double border and border color #999

Choose your width carefully because this will affect the width of each inner/outer 'border' and spacing. In the above example, each 'border' is 1px with a gap of 1px between them. However, the following style rule will widen the inner and outer widths without changing the spacing

  .double5 {
      border: 5px double #999;
  }

This is a paragraph with a double border width of 5px

If you increase the width in your style rule, in IE7 the outer border is increased first, followed by the inner border, then the spacing between the borders. This means that double borders of unequal widths are possible. For example, in IE7 a width of 4px will give an outer border of 2px, spacing of 1px and inner border of 1px. In this case, Firefox 2 seems to do things differently and appears to increase the spacing to 2px. Testing in different browsers is probably a good idea.

  .doubletop {
      border-top: 4px double #999;
}

This is a paragraph with 4px top double border. In this case, the outer border, inner border and spacing can vary between browsers.

If you stay with widths that are divisible by three in your style rule, the inner and outer borders and spacing 'widths' will be equal.

There's no need to have equal borders on every side. Top, right, bottom, and left borders can be specified individually like this:

  .double39 {
       border-top: 9px double #999;
       border-right: 3px double #999;
       border-bottom: 9px double #999;
       border-left: 3px double #999;
  }

Paragraph with unequal width top/bottom and right/left double borders.

or you can choose only one like this

  .doubleleft {
                border-left: 3px double #999;
  }

Paragraph with double border left Paragraph with double border left Paragraph with double border left Paragraph with double border left

In the above examples, I have applied double border styles to paragraphs but, of course, you can apply the styles to any element.

I don't advocate using double borders ad infinitum but they can provide an alternative that gives greater emphasis to a specific element. Why not try some different examples yourself?

Technorati :

Related Posts

Comments

  1. George

    Nice, this is well supported cross-browser too. Another underused property value!

  2. Casey

    Any idea how to do a double border that has two different colors? One inner color and one outer color?

  3. Clive Walker (Author)

    @Casey. I don't know that you can do this with the double border property. The CSS3 specification adds some additional border properties, for example image backgrounds for borders, but this may not be supported for some time.

    I think you will probably need to use two elements to create the effect of differently colored outer and inner borders. In some cases, this may means that you need to add an additional non-semantic element into your HTML. However, I would always try and use existing elements first before adding other elements just for visual purposes. For example, a paragraph within a div tag, each with their own borders and the appropriate padding and margin properties, can achieve a similar effect.

  4. Guest

    Hello, this works, thank you!
    However, is there any way you could do the outside border with one color, and the inside border with another color?
    Please help me, I want to know if it’s possible.

    Thanks

  5. Clive Walker (Author)

    @Guest. Please read my earlier comment above

  6. Vic

    There is a new property “outline” but it’s not supported by IE < 7…

  7. Clive Walker (Author)

    @Vic. In fact, the outline property has been around for at least 3-4 years now. I wrote a blog post about it in 2006! The outline property is supported by IE8 [running in IE8 mode] so it may become more widespread as IE8 usage increases.

  8. Zach Milne

    I had my border set to 2px and it was appearing solid. I have been banging my head against the wall for hours. Thank you so much. I couldn’t figure out what was wrong. Changing the width to at least 3 showed some spacing between the borders. Now I can finally relax.

  9. Rakesh

    Is it possible to change the dimensions of the line in between the two borders while using double property ?

  10. Clive Walker (Author)

    @Rakesh: There’s no way of doing that in a predictable way as far as I know. It is possible to change the double border values to numbers that are not mulitples of 3 and this will sometimes change the spacing width. However, it’s not very predictable between browsers – at least when I tried it.

Comments

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.