SJL Web Design

CSS3: Border Radius

Border Radius has been one, if not the most highly anticipated CSS3 properties. No longer will designers have to resort to using complicated absolute positioning and images to create elements with rounded corners.

As with most CSS3 properties there are three variations of the selector:

  • border-radius (CSS3 Opera Browser)
  • -moz-border-radius (Mozilla Browser – Firefox)
  • -webkit-border-radius (Webkit Browser – Safari & Chrome)

There are also variations that let you specify a particular corner as opposed to collectively changing the radius of all four points.

Border Radius (All 4 Corners)

The box below has a 3px border and is using the same three selectors as above to round each corner to a 10px radius.

This border has a radius of 10px and is created using the following CSS:

border: #00b2da 3px solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Border Radius (Individual Corners)

The box below has a 3px border and each corner has been specified a border radius of it’s own.

Each corner has been referenced using the following CSS:

border: #00b2da 3px solid;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 10px;

Taking it further

The border radius is a great new property and being able to create rounded corners with just a couple lines of CSS will save designers a large amount of time. But what else can be done with this property, using the following lines of code we were able to create the SJL logo with just CSS:

#sjllogo{
padding: 5px 10px 10px;
width: 50px;
color: #FFF;
font-size: 40px;
margin: 0 auto;
background-color: #00b2da;
border-top-left-radius: 70px;
border-top-right-radius: 0px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
-moz-border-radius-topleft: 70px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 70px;
-moz-border-radius-bottomleft: 70px;
-webkit-border-top-left-radius: 70px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 70px;
-webkit-border-bottom-right-radius: 70px;
}

Other great ways you can include the border radius property in your designs include:

Another great link for some border radius and CSS3 inspiration:

You can also check which browsers support the border-radius property on our CSS3 Browser Support post.

Download

Download supporting files here

Leave a Reply