How to make double borders with CSS

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 : css