Just Free Templates

Following on from our previous article about the changes in background properties in CSS3, we’re now going to look at the changes and new features of borders in CSS3. Things to look forward to include the ability to easily create rounded corners and using images for borders. Plus – how to add drop shadows to elements using just CSS!

New in CSS3

There are plenty of new border properties that you can use in your designs in CSS3, currently the latest versions of Chrome and Firefox will display the following demonstrations correctly.

border-radius

The new border-radius property provides the means to create rounded corners on boxes. You can either specify a radius on each corner like so:

1
2
3
4
5
6

div.example {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

This is equivilent to the following:

1
2
3

div.example {
    border-radius: 10px;
}

Here is a simple demonstration of this property in action:

The CSS for the above <div> is as follows:

1
2
3
4
5
6
7

div.example {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

Note the -webkit and -moz properties, these are used to make the borders in Webkit and Mozilla browsers (Safari, Chrome and Firefox). Once CSS3 becomes a standard these properties will be removed and you’ll be able to use border-top-left-radius and so fourth.

The full list of the browser specific codes is:

-webkit-border-top-right-radius and -moz-border-radius-topright
-webkit-border-top-left-radius and -moz-border-radius-topleft
-webkit-border-bottom-left-radius and -moz-border-radius-bottomleft
-webkit-border-bottom-right-radius and -moz-border-radius-bottomright

Note the naming differences between the two properties

border-image

border-image is perhaps the most useful of the new border properties. As the name suggest it allows you to use an image for your border but it’s not quite as simple as one might hope. Firstly, you only need to create a single image for your border, this will be split into 9 segments and either stretched or repeated to match the size of the element. To demonstrate using the border-image property, we’ll be using this image:

The border-image is used as follows:

1
2

    border-width:18px;
    border-image:url('borderimage.jpg') 18 18 18 18 repeat;

This will output:

Let’s look at how border-image works. The first part points to the image, just like the background-image property. The second part consists of 4 numbers which represent pixel sizes and define how the image is sliced.

The above diagram represents how an image will be sliced using the following CSS: border-image: url(‘diagram.jpg’) A B C D;

As above A-D can be numbers which represent pixel values. You can also use percentages which are relative to the size of the border image.

The final part of the border-image describes how the sliced image parts are repeated. The first value is the horizontal repeat and the second value is the vertical repeat. Allowed values are repeat, round and stretch.

Repeat

The following example uses repeat for the border-image, the sliced image remains the same size and is repeated around the border. The problem with this is that the image may be cut off.

Stretch

The following example uses stretch for the border-image, the sliced image is not repeated at all but rather stretched to fill the size of the borders.

Round

The following example uses round for the border-image, the sliced image is repeated but resized such that it is not cut off.

For those who can’t see the above examples, here is a screenshot of how they look in Firefox

box-shadow

box-shadow is a great new property which allows you to add shadows to elements. The syntax of the property is as follows:

1
2
3

div.example {
    box-shadow: horizontal-offset vertical-offset blur-radius color;
}

Both horizontal-offset and vertical-offset can be positive or negative. A positive value puts the shadow to the right or bottom while a negative value puts the shadow to the left or top.

blur-radius is given in pixels, a value of 0 will simply show a solid colour while a higher value will create a more blurred shadow.

Color is simply the color of the drop shadow.

The above example has the following CSS:

1
2
3
4
5
6
7

div.example {
    box-shadow: 10px 10px 0px #ccc; 
    -moz-box-shadow: 10px 10px 0px #ccc; 
    -webkit-box-shadow: 10px 10px 0px #ccc;
    background-color: #e0e0e0;
    padding: 5px; 
}

This next example demonstrates using negative offsets and using the blur radius:

1
2
3
4
5
6
7

div.example {
    box-shadow: -10px -10px 8px #ccc; 
    -moz-box-shadow: -10px -10px 8px #ccc; 
    -webkit-box-shadow: -10px -10px 8px #ccc;
    background-color: #e0e0e0;
    padding: 5px; 
}

You can also mix and match with negative and positive values:

This has a negative horizontal offset and a positive vertical offset.

border-break

The final new addition to borders in CSS3 is the border-break property. This handles how borders act when split by a page break, the following diagram from the CSS3 specification shows how the two values, “none” (left) and “close” work (right):

That’s your lot!

And that’s it for borders in CSS3, there is quite clearly plenty to look forward to once this becomes standard and is fully implemented by browsers!