Multiple Borders

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Using pseudo element(s)

You can position a pseudo element such that it’s either behind the element, and larger, making a border effect with it’s own background, or smaller and inside (but make sure the content gets positioned on top).

The element needing multiple borders should have its own border and relative positioning.

.borders {
  position: relative;
  border: 5px solid #f00;
}

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value. Careful with negative z-index, if this is within yet another element with it’s own background color, this may not work.

.borders:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 5px solid #ffea00;
}

See the Pen gbgRqZ by Chris Coyier (@chriscoyier) on CodePen.

You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before, but not allowing them to be absolutely positioned (so it looks weird).

Using outline

While it’s a bit more limited than border (goes around entire element no matter what) outline is a extra free border.

.borders {
  border: 5px solid blue; 
  outline: 5px solid red;
}

Using box-shadow

You can use box-shadow to make a border effect, by making the the shadow offset and have 0 blur. Plus, by comma-separating values, you can have as many “borders” as you like:

.blur {
  box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%);
}

See the Pen xbgreX by Chris Coyier (@chriscoyier) on CodePen.

Using a clipped background

You can make the background of an element stop before the padding. That way an elements normal border can look like a double border in a way.

.borders {
  border: solid 1px #f06d06;
  padding: 5px;
  background-clip: content-box; /* support: IE9+ */
  background-color: #ccc;
}

On an input:

See the Pen Double border effect on <input> by Chris Coyier (@chriscoyier) on CodePen.