The Straight Skinny On CSS3 Rounded Corners and Border Effects

by 2 05/11/2012

In the previous article, we looked in to a wide variety of text shadow effects. In this article we’re going to look at rounded corners and border effects.

Rounded Corners

Previously as a web developer, if you ever wanted to create a layout with rounded corners it used to be an absolute pain. Techniques such as the ‘sliding doors‘ method – while effective – used to require an excessive amount of markup to implement. What’s the point of separating structure and presentation when your structure has to be bloated to make a corner round?!

Thankfully, CSS3 provided us with a solution to this problem which means we no longer need a set of nested block elements (e.g. DIV inside DIV inside another DIV…).

The CSS property border-radius allows us to add rounded corners with just a single line of code to any block element. Simply add the border-radius property to the element you wish to give rounded corners, it doesn’t matter if the element doesn’t have a border.

#myElement { border-radius:16px; }

With this code, every corner will have a border radius of 16px.

Border Radius 16px

So, what are our options for border-radius? You can setup border-radius to work in the following ways:

You can change the border radius on all corners, as we saw above:

border-radius: all;

For example:

border-radius: 16px;

You can change the border radius for each corner:

border-radius: top-left top-right bottom-right bottom-left;

For example:

border-radius: 4px 40px 20px 16px;

Border Radius 4px 40px 20px 16px

You can use two parameters to match opposite corners:

border-radius: (top-left & bottom-right) (top-right & bottom-left);

For example:

border-radius: 4px 16px;

Border Radius 4px 16px

Or 3 parameters to give the top-left and bottom-right different values:

border-radius: top-left (top-right & bottom-left) bottom-right;

For example:

border-radius: 4px 16px 40px;

Border Radius 4px 16px 40px

The following browsers support border-radius:
Browser Matrix

For browsers that don’t support border-radius, you’ll get the normal square corners.

Border Images

While rounded corners take care of one kind of border effect, sometimes we want to use images to add more graphical effect to our borders – and traditionally we would have created 3 to 9 different DIV elements to achieve this (depending on the effect).

CSS3 property border-image solves this problem by providing a simple CSS syntax to split an image in to a border.

The syntax for border-image is initially quite complex to understand, so let’s start with an example. Suppose we have the following image:

Border Image

In this image, each of the diamonds have been created as 26 x 26 pixels in size. To use this image as our border we would use the following code:

div#myElement { height:182px; width:182px; border-width:26px; border-image-source: url(../img/border-image.png); border-image-slice:26; }

In this example, we have created a box that is 182 x 182 pixels in size. This number was deliberate – 26 divides in to 182 seven times with no remainder. We’ve also added a CSS property for border-width setting it at 26 pixels; and two border-image-* properties. The first, border-image-source, we’ve given a image URL and the second, border-image-slice, we’ve given a number value of 26.

The result of this code is:

With this example in mind, let’s take a look at all the properties and syntax for border-image:

border-image-source: none | image-url

With border-image-source we can either provide ‘none’ or a URL to an image (as we would for a background image URL).

border-image-slice: number | percentage [fill];

The property border-image-slice specifies the regions where we wish to cut up our image. We can specify up to four regions (one for top, right, bottom and left), in the same way we can specify up to four different margin values or padding values. These values can either be percentages (in relation to the image size) or numbers. Numbers should not be suffixed with a unit, they are automatically pixels for raster images (GIF, JPG, PNG).

The optional parameter ‘fill’ allows the middle part of the border image to be used as a background for the element. If ‘fill’ is not specified, then the element background is treated as empty.

For example:

div#myElement { border-image-source: url(../img/border-image.png); border-image-slice:26 fill; border-width:26px; height:182px; width:182px; }

Border Image

Before we go any further, it is important that we understand the box model. For every block level element, the following model applies:

As shown in the diagram, each element has a content box, and an optional padding box, border box and margin area; which can be specified for each edge. With this in mind, let’s continue.

border-image-width: number | percentage | auto;

The property border-image-width can be used to set the width of the border image. It’s functionality is similar to border-width except for one distinction. The property border-width will create the required size within the border-box area, while border-image-width will not. If border-image-width is specified without the border-width, then the border image will sit within the padding-box (depending on the offset).

For example:

div#myElement { border-image-source: url(../img/border-image.png); border-image-slice:26; border-image-width:26px; height:182px; width:182px; }

Border Image

border-image-outset: length | number;

The property border-image-outset allows us to position our border-image outside of our box. We can either do this with a pixel value (e.g. 26 pixels), or with a number value which represents multiples of the border-width (0 and 1 are the most useful here).

For example:

div#myElement { border-image-source: url(../img/border-image.png); border-image-slice:26; border-width:26px; border-image-outset:5px; height:182px; width:182px; }

Border Image

border-image-repeat: stretch | repeat | round | space;

Finally, we have border-image-repeat, which can be set to ‘stretch’, as shown above.

Or ‘repeat’.
Border Image

Or ’round’, which repeats the image, but stretches so there are a whole number of repeats, or ‘space’, which repeats the image, but adds space between repeats to fill the area.

Rather than listing each of those individual properties, it is possible to create a shorthand for border-image (all on one line):

border-image: none | border-image-source border-image-slice / border-image-width / border-image-outset border-image-repeat;

The shorthand can be rather complicated, which is why we covered each of the properties separately! The shorthand is particularly helpful for when we get to browser support, as support for border-image and its various properties is mixed:

Chrome supports browser-image and all it’s properties (except round and space) without a prefix. Opera, Safari and Firefox support the shorthand border-image with a prefix only, but they do not support all the features; and Internet Explorer doesn’t support border-image at all (with no known support in IE10). Based on this, it’s currently difficult to recommend using border-image for borders at the present time, but in the future this feature could become very useful. Keep an eye on CanIUse.com for updates.

Coming Soon

In the next article, we will take a look at box shadow and the effects that can be made with this exciting CSS3 property!

About 

Andi Smith is a Presentation Technical Architect who writes about web development, CSS and JavaScript on andismith.com. You can follow him on Twitter at @andismith.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

2 COMMENTS

Peter

Thank you kindly for the article. Is there a solution to make the ‘border-radius’ work in Internet Explorer please? There is still a need of making your webprojects browser-compatible.

Many thanks in advance!

December 20, 2012 Reply

Andi

Hi Peter,

Take a look at http://css3pie.com/.

Thanks,
Andi

February 18, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>