Introduction to CSS3 - Part 2: Borders

Written by David Appleyard, On 7th May 2008.
Filed in Articles, CSS.

For the second part of our series on CSS3, we’ll be taking a look at borders. Everyone who uses CSS is familiar with the border property - it’s a great way to structure content, create effects around images and improve page layout.

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.

All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Rounded Borders

Achieving rounded borders using current CSS coding can be tricky - there are numerous methods available, but none are extremely straight forward. Creating individual images for each border is often needed in addition. Using CSS3, creating a rounded border is incredibly easy. It can be applied to each corner or individual corners, and the width/colour are easily altered. The CSS code is:

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

Rounded CSS3 Borders

Gradients

Gradient borders can look effective if used correctly. This code is a little more complex, requiring you to define each colour of the gradient. The CSS code is:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Gradient CSS3 Borders

Box Shadows

Adding a shadow to an element is difficult at present - it is a good way to differentiate a certain area, but as with any effect, it should be used sparingly. The CSS code is:

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

Shadow CSS3 Borders

Border Images

Border images are one of the most useful additions - I’m really looking forward to discovering how people choose to use them. CSS has the ability to repeat, or stretch a border image as you choose. The CSS code is similar to the following (it varies between browsers at present):

1
2
3

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

Image CSS3 Borders

In conclusion…

Borders are revolutionized! These additions in CSS3 are bound to save you a huge amount of time as a designer. They go a long way towards simplifying layouts and allow you to create visually appealing boxes without even opening Photoshop.

The next article in this series will be expanding on a new area in CSS3, Text Effects. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

Tags: borders, CSS, css3, gradient, rounded

Virgil says:

May 7, 2008 at 1:39 pm

None work with IE 7 and Shadow and Image boders don’t even work in Firefox 2 (of which I downloaded the latest version last week).

Virgil Viall says:

May 7, 2008 at 1:41 pm

It is always better to use older coding since most browsers are backwards compatible with older code.

Marko Novak says:

May 8, 2008 at 3:15 am

It’s very hard for web designers to make top notch design using new approaches, since you’re so limited by older versions of browsers. You have to make sure the website degrades gracefully. But this takes too much time.

David Appleyard says:

May 8, 2008 at 3:24 am

At present, CSS3 is certainly not supported by most major browsers. The only two which do support most of these are Safari 3 and Firefox 3 Beta. Until the various modules are completed, browsers won’t implement them.

This is a guide which will hopefully give you a preview of what to expect when CSS3 does start to be more widely supported.

Jab says:

May 8, 2008 at 11:56 am

For In-House projects I completely rely on Firefox. There is no time to lose and I want CSS3. Remember these old buttons “optimized for Netscape 0.1″? That`s what I do…I try to pull all my visitors away from IE or other lame browsers.

Ziongem says:

May 9, 2008 at 9:06 am

The border image is something that is needed today. I’m really glad it will be implemented.

Mondo Libero says:

May 9, 2008 at 12:23 pm

Thanks for this work, it can be very useful

GUESS says:

May 13, 2008 at 1:26 pm

@Virgil: You can use CSS3 as a “progressive enhancement” for now. It won’t affect the look in browsers that don’t support CSS3, but the browsers which do will get a little something extra.
As CSS3 builds off of the CSS2 specs, it will gracefully degrade.