How to make double borders with CSS

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 :

delicious magnoliaAdd to Google

» Buy Domain Names

Comments

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


    · George    Jan 22, 11:05 AM    1

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


    · Casey    Dec 15, 12:20 AM    2

  3. @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.


    · Clive Walker    Dec 15, 09:02 AM    3
Textile Help