Create Rounded Corners with CSS

November 12, 2011 // In: CSS

The CSS3 border-radius property allows us to easily create rounded corners of the elements. The Designing is very quick, and the usage of corner images is no more needed using this emerging technology.

The following example will show you how to create rounded corner

#example1 {
    border-radius: 15px;
}

To support in firefox  you need to use -moz-

#example1 {
    -moz-border-radius: 15px;
    border-radius: 15px;
}

Rounder corners can be created independently using the four individual border-*-radius properties

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

border-*-*-radius: [ | ] [ | ]?

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

The -moz- prefix

Mozilla’s Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners, i.e. accepting two values per corner to determine the horizontal and verical radii independently. Prior to version 3.5, the browser only accepted one value per corner, resulting in corners with equal horizontal and vertical radii.

The syntax, from Firefox 3.5 onwards, for the main part follows the current W3C specification

W3C Specification                    Mozilla Implementation
border-radius                              -moz-border-radius
border-top-left-radius                 -moz-border-radius-topleft
border-top-right-radius               -moz-border-radius-topright
border-bottom-right-radius         -moz-border-radius-bottomright
border-bottom-left-radius           -moz-border-radius-bottomleft

#Example{
height: 100px;
width: 100px;
background-color: #cccccc;
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px 5px;
}

#Example1 {
height: 65px;
width:160px;
background-color: #cccccc;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example2 {
height: 65px;
width:160px;
background-color: #000000;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example3 {
height: 65px;
width:160px;
background-color: #fff600;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example4 {
height: 5em;
width: 12em;
background-color: #0033ff;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example5 {
height: 65px;
width:160px;
background-color: #ccffcc;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example6 {
height: 70px;
width: 70px;
background-color: #ccc666;
-moz-border-radius: 35px;
border-radius: 35px;
}

Preview

Create Simple CSS Mouseover Menu
CSS Sticky Footer