Easy Rounded Corners using CSS3
This article takes a look at the css3 border-radius property which allows
developers to easily create rounded corners in their web pages. Prior to css3,
developers needed to use approaches such as using corner images to give an
illusion of rounded corners or arranging multiple div tags to give a smooth
rounded look.
Syntax
Setting rounded corners using css3 is easier than 1-2-3. Just set the
"border-radius" property and take a look at the results. As with any other "new"
properties/features, you do need to ensure client browser support.
#roundcnr1 {
border-radius: 12px;
}
In previous firefox versions, you needed to specify the -moz- prefix for Firefox
browsers ( -moz-border-radius: ...). The current/newer versions of firefox work
without needing the -moz- prefix.
Sample in action
![css3rncnr1.jpg]()
Source Code
<!DOCTYPE html>
<head>
<style>
#roundcnr1
{
-moz-border-radius: 12px;
border-radius:
12px;
border-style: solid;
border-color: #996600;
border-width: 1px;
}
</style>
</head>
<body>
Div without
Rounded corners
<BR/><br/>
<div style="border: 1px solid
black;width:100px;" >
Hello - without rounded borders
</div>
<BR/>
Div with Rounded
corners
<br/><BR/>
<div style="border: 1px solid
black;border-radius:10px;width:100px;" >
Hello - with rounded borders
</div>
<BR/>
Table without Rounded corners
<br/><BR/>
<table
style="border: 1px solid black;">
<tr><td>Row1 Col1
</td><td>Row1 Col2
</td></tr>
<tr><td>Row2 Col1
</td><td>Row2 Col2 </td></tr>
</table>
<BR/>
Table with Rounded corners
<br/><BR/>
<table
style="border: 1px solid
black;border-radius:4px">
<tr><td>Row1 Col1
</td><td>Row1 Col2
</td></tr>
<tr><td>Row2 Col1
</td><td>Row2 Col2 </td></tr>
</table>
<br/>
</body>
|
Source Code for Sample 1
Note that in the above sample, I have just added inline styles for the sake of
brewity. You can also specify a css file containing the styles.
Additional Customizations
You can specify separate values for each of the 4 corners using the
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius,
border-top-right-radius properties.
You can also specify 2 radii values for each corner - this will result in an
elliptical corner (arc shaped).
So now you have 8 combinations of radii values that can be set. The easiest is
providing the 1 value which will be applied to all the 8 properties. You can
customize to the level of providing each of the 8 values individually. A concise
short hand representation is available for ease-of-setup using the following
format
An alternative syntax would be a short hand
(Top=T, Bottom=B, Left=L, Right=R
H=Horizontal radius, V=Vertical radius)
border-radius: HTL HTR HBL HBR / VTL VTR VBL VBR
Example
border-radius: 2px 5px 3px 1px / 7px 4px 17px 6px;
Sample in action
![css3rncnr2.jpg]()
Source Code
Table2 with Rounded corners
<br/><BR/>
<table
style="border: 1px solid black;border-radius: 2px 5px 3px 1px / 7px 4px 17px
6px;">
<tr><td>Row1 Col1 </td><td>Row1 Col2
</td></tr>
<tr><td>Row2 Col1
</td><td>Row2 Col2 </td></tr>
</table>
|
Units: The units can be specified as length (px) or
percentage can be used.
Conclusion
In this article we saw how easy it is to render custom rounded corners using a
single css3 property. We took a look at the power and flexibility pf the
border-radius.
Happy Coding!