Rounded corners
In CSS3, the border-radius property is used to create rounded corners:
Syntax:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> border-radius </title>
<style type="text/css">
#box
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
<div id="box">The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
Result:
B. Circle
we can also create circles by using this property.
Syntax:
· -moz-border-radius: 50px;
· -webkit-border-radius: 50px;
· border-radius: 50px;
Example:
