CSS 3 Rounded Corners

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 :

How to make Rounded Corner using CSS 3

  • Welcome to CSS Syntax [dot] com
    Welcome to our Website ... CSS Syntax com is a website that explains about anything related to web...
    www.csssyntax.com
  • CSS 3 Background Color Opacity
    Everyone knows what RGB stands for (red, green, blue), but what does the A stand for?
    www.csssyntax.com
  • CSS 3 Text Shadow
    Using CSS3, we can create shadow effects on text with very simple syntax
    www.csssyntax.com
  • CSS 3 Box Shadow
    Excess CSS3 is able to make something that can not be done by CSS2
    www.csssyntax.com