How to make Rounded Corners using CSS 3 ?
Using css 3 property, you can create a button with rounded corners or Borders in a matter of seconds, without having to use the image, which will spend a lot of your time.
With CSS 3, We can create Rounded Corners like css code below:
<html>
<head>
<title>Rounded Corner using CSS 3</title>
<style type="text/css">
.rounded {
width:200px;
padding:5px;
text-align:center;
background:#dddddd;
border:solid 1px #666666;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
</head>
<body>
<div class="rounded">
<h1>How to make Rounded Corner using CSS 3</h1>
</div>
</body>
</html>
As you can see, all that you need to do is specify three CSS3 properties. Eventually, it will only be one; you have to use three now because different browsers use different property names.
The Result :
