Border-radius examples

Introduction

This document contains some examples of use of the CSS3 border-radius properties, and is a supplemental document for the entry CSS rounded corners without images at Arve Bersvendsen's Virtuelvis. To view this document correctly, you will need a CSS3 capable browser (none of which exist at the time of writing, or a browser using the Gecko rendering engine from the Mozilla foundation. Please note that parts of the demonstration breaks in Mozilla. These parts are commented specially.

The border-radius property

The border-radius property will round all four corners of a corner.

One length value

If the second length value is omitted, it is interpreted as being equal to the first, meaning that border-radius: 5px 5px is equal to border-radius: 5px;. Example:

#ex1 {
  -moz-border-radius: 1em;
  border-radius: 1em;
}

Different length values

When the length values are different, the first length value will be interpreted as horizontal length, and the second one as vertical length, for left to right scripts. Examples

#ex2 {
  -moz-border-radius: 2em 1em;
  border-radius: 2em 1em;



  
}

Note that Mozilla breaks horribly, and makes the top-left and bottom-right corners circles with radius 2em, and the bottom-left and top-right corners are circles with radius 1em, instead of making all four corners ellipses with horizontal radius 2em and vertical radius 1em.

Individual corners

All of the following properties do not have mozilla equivalent properties.

Example:

#ex3 {
  border-top-left-radius: 1em;
}
#ex3 {
  border-top-right-radius: 1em;
}
#ex3 {
  border-bottom-right-radius: 1em;
}
#ex3 {
  border-bottom-left-radius: 1em;
}