CSS Borders: The Basics And Rounded Corners

Posted: 31 Oct 2011 05:30 AM PDT

Last week I walked through the css background property. The other half of the same W3C spec covers borders and so today I want to begin a walk though of css borders.

Borders are something I’m sure you use on most projects. Like backgrounds you’re probably familiar with css borders and yet may not be aware of some of all the properties and their values.

In this post I’ll look at the basic css border and then move into rounded corners with border-radius. Next time I’ll take an in-depth look at working with border-images.

CSS Border

As I said above I’m sure you’re familiar with using css borders. I’m also going to guess there are a few finer points with them that you may not know.

You may get tired of me talking about boxes all the time, but let me refer to the box model once again. Borders are the area between padding and margin. Margins are outside of borders and paddings are inside, but you already knew that.

Borders apply to all html elements except tables when the table’s border-collapse property has been set to collapse.

border-color

As the name implies the border-color sets a color for the border. You can apply any color using an acceptable color name, hexadecimal notation, rgb, or rgba notation.

border-color is actually a shorthand for 4 properties, border-top-color, border-right-color, border-bottom-color, border-left-color.

Most of the time you’re going to set the same color and use the shorthand, but you can achieve some interesting shapes and effects by varying the color along with some other properties.

border-style

You probably use the same 2 or 3 border-styles all the time. Solid most often and perhaps dotted and dashed at times. There are several other values you can use, though.

The border style can be set to none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Different browsers will represent these styles somewhat differently. A border-style of ridge won’t look exactly the same in Safari or Chrome as it does in Firefox or IE, but the general characteristics will be the same.

The image above shows what each of these styles should look like approximately, but play with them in different browsers to see how they actually appear.

Like border-color, border-style is also shorthand. You can set each side with border-top-style, etc.

border-width

border-width is, of course, about sizing the width of the border. Allowable values are.

length (px, em)
thin
medium
thick
inherit

Generally you’ll set the length since thin, medium, and thick are determined by the browser. They will remain consistent in a document, but otherwise their size is out of your control.

And as with the other two properties above border-width is shorthand for border-top-width, etc.

Border Shorthand

Speaking of shorthand, we can use one shorthand of all 3 of the properties above.

{code type=css}
div {
border-width border-style color;
}

div {
border: 1px solid red;
}
{code}

You don’t need to use all three properties in the shorthand. I often find I want to add top and bottom or left and right borders, but not the other.

{code type=css}
div {
border: solid red;
border-width: 1px 0;
}
{code}

Rounded Corners

In css every element is a rectangular box. There’s no way around it. Curves are nice though, and for years developers had to use images to show curves on web pages.

The border-radius property changed that.

border-radius

At its simplest you set a border-radius by giving it a single value as either a length or %

{code type=css}
div {
border-radius: 10px;
}
{code}

The 10px represents the radius of a circle at each corner and the corner is drawn as an arc of this circle instead of as a 90 degree corner.

The above is shorthand for:

{code type=css}
div {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
{code}

There’s more though. Each corner can have both a horizontal and vertical radius. You show these two values with a slash. The values before the slash are the horizontal values and those after the slash are vertical.

{code type=css}
div {
border-top-left-radius: 10px / 2%;
}
{code}

Putting things back together in the shorthand you get

{code type=css}
div {
border-radius: 10px 5px 15px 10px / 5px 10px 15px 20px;
}
{code}

The corners follow a clockwise top-left, top-right, bottom-right, bottom-left order. If the bottom-left value is omitted it’s the same as the top-right and if the bottom-right is omitted it’s the same as the top-left. The opposite corner in both cases.

The border-radius property has pretty good support in modern browsers, though it won’t work in IE8 or below. Until recently you needed to use vendor specific prefixes, but that’s no longer the case in the latest browsers including IE9.

For IE8 and below I find jQuery offers a nice solution that works similarly to the css. You can see it demonstrated here. The demo links to the jQuery plugin it relies on.

Corner Shaping

The resulting shape of the corner can vary based on both the border radius and the border width.

It’s easiest to see in the image above, which is the effect of a a rounded corner connecting two borders of unequal thickness (left) and the effect of a rounded corner on two borders that are thicker than the radius of the corner (right).

This happens because the radius of the padding edge (inner border) is the radius of the outer border minus the corresponding border thickness, which can result in a negative or positive value as well as a value of 0.

Corner Clipping

Last week I talked about the background-clipping property. The background, though not a border-image (which we’ll get to next week) are clipped to the curve of the border-radius.

Other things such as the overflow property are also clipped to the curve and mouse events don’t occur outside the curve.

The element is still a rectangular shape, but many things can’t happen in the small area between the curve and 90 degree corner that’s no longer seen.

Color and Style Transitions

When the borders meeting at a corner have different properties set (color, radius, etc) a transition has to occur.

Again this is probably easiest to see in the image above, which shows several different rounded corners and the area over which a transition will exist.

I won’t attempt to explain the math involved because I have no idea what it is.

The important thing to know is that this transition exists and that we can probably have some fun playing around with different values and see what happens.

Overlapping Curves

Corner curves can’t overlap. If the radii of two adjacent corners exceeds the size of the border box, browsers will proportionally reduce the values until they no longer overlap.

The values may be further reduced if they interfere with things like scrollbars as well.

Again I’ll spare you the complicated algorithm, though you’re welcome to check for yourself if you’re interested in the math.

The Effect of border-radius on Tables

The border-radius properties do apply to tables or inline-tables, though potentially may not if the border-collapse of the table is set to collapse.

The effect of border-radius on inline elements is undefined. There may be a definition in the future, but for now your guess is as good as anyone’s as to what will happen.

Perhaps it’s best not to use the border-radius properties on tables at the moment.

Summary

Much of the above was probably familiar to you. We’ve all been using borders for years and for the last few I’m sure the border-radius has entered the work of many of you.

While most of what’s included in this post seems simple on the surface there’s quite a bit you can do with borders if you experiment, especially if you play around with the height and width of the content box.

You can create some interesting shapes with css borders and with the addition of some pseudo elements you can create some rather complex shapes

Hopefully I’ve been able to introduce you to a few new things or perhaps clear up something that hasn’t been obvious. Play around with css borders and see what you can do.