How To Use Border-Radius

How should you use border-radius? Border-radius is supported in IE9+, Firefox, Chrome, Safari, Opera and is great to give your square boxes & buttons curved edges without the use of images. Here are some examples on how to use border-radius.

1. Simple curved corner border-radius effect

Some Text Here



/******  HTML  ******/

<div class="border_radius_box">
    <p>Some Text Here</p>
</div>

/******  CSS  ******/

.border_radius_box
{ float: left;
background: #898989;
padding: 2em 2em 1em 2em;
margin-left: 0.5em;
border-radius: 1em 1em 1em 1em;
-moz-border-radius: 1em 1em 1em 1em;
-webkit-border: 1em 1em 1em 1em;}

.border_radius_box p
{ color: #FFF; }

2. Top curved corners border-radius effect

Some Text Here



/******  HTML  ******/

<div class="border_radius_box2">
    <p>Some Text Here</p>
</div>

/******  CSS  ******/

.border_radius_box2
{ float: left;
background: #898989;
padding: 2em 2em 1em 2em;
margin-left: 0.5em;
border-radius: 1em 1em 0em 0em;
-moz-border-radius: 1em 1em 0em 0em;
-webkit-border: 1em 1em 0em 0em;}

.border_radius_box2 p
{ color: #FFF; }

3. Opposite corner border-radius effect

Some Text Here



/******  HTML  ******/

<div class="border_radius_box3">
    <p>Some Text Here</p>
</div>

/******  CSS  ******/

.border_radius_box3
{ float: left;
background: #898989;
padding: 2em 2em 1em 2em;
margin-left: 0.5em;
border-radius: 2em 0em 2em 0em;
-moz-border-radius: 2em 0em 2em 0em;
-webkit-border: 2em 0em 2em 0em;}

.border_radius_box3 p
{ color: #FFF; }

4. Speech bubble border-radius effect

Some Text Here



/******  HTML  ******/

<div class="border_radius_box4">
    <p>Some Text Here</p>
</div>

/******  CSS  ******/

.border_radius_box4
{ float: left;
background: #898989;
padding: 2em 2em 1em 2em;
margin-left: 0.5em;
border-radius: 3em 3em 3em 0em;
-moz-border-radius: 3em 3em 3em 0em;
-webkit-border: 3em 3em 3em 0em;}

.border_radius_box4 p
{ color: #FFF; }

Back to the How To page.