How to Create Multiple Borders in CSS3

The CSS2.1 border property has served us well but it’s a little basic. What if you require two or more borders in different colors? The CSS3 border-image property is an option but it still requires Photoshopping shenanigans and the syntax is quite complex. However, if you simply need a series of solid-color borders, there is an easier alternative: the box-shadow property.

CSS3 Multiple Borders
View the multiple border demonstration page…

box-shadow has six arguments:

inset: (optional) if defined, the shadow will appear inside the element.
horizontal: the x distance from the element
vertical: the y distance from the element
blur: (optional) the blur radius, i.e. 0 for no blur
spread: (optional) the distance the shadow spreads, i.e. 1px extends the shadow 1 pixel in all directions so it’s 2px wider and taller than the parent element
color: the shadow color

The little-used spread argument can be used to create a border. For example, a 1 pixel solid black border can be created using no blur and a 1px spread:



box-shadow: 0 0 0 1px #000;

Unlike the border property, box-shadow permits multiple shadows separated with a comma. The last shadow defined sits at the bottom of the stack so, to create the box shown above, we use this code:



box-shadow:

	0 0 0 2px #000,

	0 0 0 3px #999,

	0 0 0 9px #fa0,

	0 0 0 10px #666,

	0 0 0 16px #fd0,

	0 0 0 18px #000;

Note:

The effect works in all the latest browsers including IE9.
It can be combined with border-radius but remember that the radius is applied to the inner element so the outer shadows extrude accordingly.
Unlike a real border, box-shadow does not require space so the effect will flow under other elements.

Some will consider it a hack, but it’s an quick solution for multiple borders which doesn’t require images.

Frequently Asked Questions (FAQs) about CSS3 Multiple Borders

How can I create a double border in CSS3?

Creating a double border in CSS3 is quite simple. You can use the ‘border’ property and specify the width, style, and color. For a double border, the style should be ‘double’. Here’s an example:

div {
border: 5px double black;
}
In this example, a double border with a width of 5 pixels and color black will be applied to the div element.

Can I use different colors for the double border in CSS3?

Yes, you can use different colors for the double border in CSS3. However, this requires a workaround as CSS3 does not directly support multiple colors for a double border. You can achieve this by using multiple div elements or pseudo-elements like ::before and ::after with different border colors.

How can I create multiple borders in CSS3?

You can create multiple borders in CSS3 by using the ‘box-shadow’ property. You can specify multiple shadows by comma-separating them. Each shadow is specified as an offset from the div, along with a blur radius and a color. Here’s an example:

div {
box-shadow: 0 0 0 10px #ff0000, 0 0 0 15px #00ff00, 0 0 0 20px #0000ff;
}
In this example, three borders are created with colors red, green, and blue respectively.

Can I create rounded borders in CSS3?

Yes, you can create rounded borders in CSS3 by using the ‘border-radius’ property. You can specify the radius for each corner of the border. Here’s an example:

div {
border-radius: 10px;
}
In this example, a border with a radius of 10 pixels is applied to the div, making it rounded.

How can I create a dashed or dotted border in CSS3?

You can create a dashed or dotted border in CSS3 by using the ‘border-style’ property and specifying ‘dashed’ or ‘dotted’. Here’s an example:

div {
border: 5px dashed black;
}
In this example, a dashed border with a width of 5 pixels and color black is applied to the div.

Can I use gradients for borders in CSS3?

CSS3 does not directly support gradients for borders. However, you can achieve this by using a div with a gradient background and then another div inside it with a solid background, creating the illusion of a border with a gradient.

How can I create a border only on one side of the div in CSS3?

You can create a border on only one side of the div in CSS3 by using the ‘border-top’, ‘border-right’, ‘border-bottom’, or ‘border-left’ properties. Here’s an example:

div {
border-left: 5px solid black;
}
In this example, a border with a width of 5 pixels and color black is applied only to the left side of the div.

Can I animate the borders in CSS3?

Yes, you can animate the borders in CSS3 by using the ‘transition’ property along with a change in the border property. You can specify the duration of the transition and the property to transition.

How can I create a border with an image in CSS3?

You can create a border with an image in CSS3 by using the ‘border-image’ property. You can specify the image, the slice, the width, and the outset of the border.

Can I create a border with transparency in CSS3?

Yes, you can create a border with transparency in CSS3 by using the ‘rgba’ color value. The ‘a’ in ‘rgba’ stands for alpha, which represents the opacity of the color. An alpha value of 1 is fully opaque, while an alpha value of 0 is fully transparent.