Quick CSS rounded corners

Premise
1. CSS
2. Markup
3. Images
4. Cross-browser compatibility (Internet Explorer ≤ 6)
5. Ready-made components
6. Expanding on the framework
Copyright

Premise

This page describes an economical, easy, and customisable cross-browser framework for implementing rounded corners on pages in which there is a solid-colour background behind the cornered elements.

The technique uses a fairly simple chunk of CSS that establishes a relationship between any object that wants corners (a ‘cornered’ object) and corner elements using a single background-image. Then it’s simply a case of applying a class of .cornered to objects that need them, and inserting requisite elements of class .corner. A single line of CSS can then be added to specify different background-images for any particular ‘cornered’ object. All the necessary code and images are provided here ready-to-use for generic cases, but by changing a few values and creating your own images using PhotoShop or the Gimp you can go wild.

1. CSS

.cornered {
  padding: 10px;
  position: relative;
}

.corner {
  background-image: url(white10px.png);
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  height: 10px; width: 10px;
}

First of all we establish the essential corner mechanics. Any object that is cornered will need to have a padding equal to the corner radius, to prevent any content getting caught under the corners. The position: relative; ensures that the corner elements know to use the cornered object’s metrics for positioning reference.

The corner elements are given some ‘reset’ styles to make sure the metrics and positioning are under control, and is given position: absolute; so that they are taken out of the normal position flow and are placed relative to the edges of the cornered element. The default corner background-image is unique and specified here. On this page, everything has a white background so this is the only time an image needs specifying. I elaborate on images below; suffice to say for this example that it needs defining only once for any four corners.

.top {
  top:0;
}

.right {
  right: 0;
  background-position: 10px 0;
}

.bottom {
  bottom: 0;
  background-position: 0 10px;
}

.left {
  left: 0;
}

.bottom.right {
  background-position: 10px 10px;
}

This code gives all the necessary distinctions for four corners. Technically, the top and bottom rules aren’t even necessary, but having them specified helps to understand how the rules work. Any corner needs three classes: one specifying that it is a corner; one describing its vertical positioning (top or bottom); and one describing its horizontal positioning (left or right).

You’ll notice that the .right and .bottom rules are specific to the top-right and bottom-left corners respectively, only to have the bottom-right corner individually specified below. This is necessary for two reasons: Firstly, any specified property will override previous definitions of that property — so while you might think that a corner of classes .top and .right would get given the top property and then the right, the property in .right actually overwrites that in .top. This wouldn’t be such a problem were it not for another aspect of CSS which dictates that, although top-left is the default position, a background-position with only one axis property will set the other value to center.

2. Markup

This is how you specify a cornered object in your markup. The structure is robust enough to be injected into most designs, so simply adding the class .cornered to your objects of choice and chucking the requisite div.corners in should work without re-thinking a designs code from the ground up.

3. Images

The image used for the corners on this page (which uses the code detailed above) is the one specified in the .corner rule in the CSS above. This system uses a single 20 by 20 pixels circle, which divided into four along the x and y axes provides the four corners. The fact that the corners are 10 pixels high and wide combined with the background-position property allows only the relevant part of the circle to be used in each corner. Using a single image saves on CSS code; time spent making images; and crucially in page load time — the one image is invariably smaller in byte-size than the sum of its sliced parts, but more importantly only one call to the server is made as opposed to four — calls to and responses from the server (HTTP requests) make up a major part of load time and cutting back on this wherever possible is an excellent policy: It also means that all corners appear at once rather than one by one.

The image in question is a 24-bit PNG with an alpha-channel that leaves the centre of the circle transparent and overlays the remaining space between the circle diametre and the rectangular image edge with white. The advantage of using an alpha PNG is that it encodes variable levels of transparency on the circle-edge pixels, giving anti-aliased pixels rather than simple white and transparent as a boolean — which would give a jagged edge. The transparency means that, as long as the background that the cornered element is placed above is white, this single image can be used for corners on any element, no matter its colour — the cornered element can even have a background-image featuring a gradient or complex texture and the corners will still smoothly round it off against the page background. The image in question (white10px.png) is shown below as a static image blown up on a scale of 20:1 against a green and red checkered background.

Examples of elements of various colours and textures are demonstrated below. These examples use the markup exactly as specified above — the only modifications are in additional classes and corresponding separate CSS rules to specify background and metrics.

To be continued.

It is, of course, entirely possible to use a simple GIF instead of a PNG — if you know which colour the cornered object will have then you can create an image that uses that colour instead of transparency — it’s also easy to specify different background-images for different corners. In the example below a cornered div has a black background, so cornered elements inside it need a corner image (black10px.png) that will give black edges instead of white ones.

The fun never ever ends.

This is the code used for the example above:

div.black {
  background-color: #000;
}

div.black .cornered .corner {
  background-image: url(black10px.png);
}

div.cyan {
  background-color: #9cf;
}

...And the format above can be applied to all sorts of situations. The second rule is the crucial one — in human terms it states that ‘Any .corner inside a .cornered object that is itself inside a div of class .black must use this background-image.’ — the specification of the cornered element as a selector seems redundant, as corners are obviously inside a cornered object, but it needs to be inserted otherwise this rule would apply to div.blacks corners as well.

To be continued.

Quick CSS rounded corners

Contents

Premise

1. CSS

2. Markup

3. Images

4. Cross-browser compatibility (Internet Explorer ≤ 6)

5. Ready-made components

6. Expanding on the framework