Round borders in CSS3

Making round borders with the CSS3 is easy. In this tutorial we will give a closer look at how to make nice round borders using only the CSS tools.

To make the rounded border we use the CSS3 property border-radius. The border radius property is shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

To make even rounded border on all 4 corners you should use a shorthand property border-radius and set it to, let's say, 25% (all 4 corners need same number), and to make the elliptical border you should set the value for border-radius to be 50%.

Examples

An example of evenly rounded borders set with the CSS border-radius property:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#perfect {
    margin:25px auto; padding:4%;
    width:200px; height:125px;
    border:#c2c555 solid  4px; border-radius: 25px; 
    background-color:#e2e555;
    /* ADD proprietary selectors if needed */
  }
div {
    font-family:Arial; font-size:1.4em;
    text-align:center;
  }
</style>
</head>
  
<body>

<div id="perfect">
   Evenly rounded borders...
</div>

</body>
</html>

An example of circled rounded borders set with the CSS border-radius property:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#perfect {
    margin:25px auto; padding:0%;
    width:180px; height:180px;
    border:#555 solid  4px; border-radius: 90px; 
    background-color:#eee;
    /* ADD proprietary selectors if needed */
  }
div p {
    margin-top:2.0em;
    font-family:Arial; font-size:1.4em;
    text-align:center;
  }
</style>
</head>
  
<body>

<div id="perfect">
  <p>Evenly rounded borders as a circle...</p>
</div>

</body>
</html>

An example of a cloud-like rounded borders set with the CSS border-radius properties:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#perfect {
    margin:20px auto; padding:4%;
    width:200px; height:120px;
    background-color:#fcfcfe;
    border:10px solid rgba(125,175,250,0.3);
    border-top-right-radius:50px; border-top-left-radius:50px; border-bottom-left-radius:50px;
    /* ADD proprietary selectors if needed */
  }
div {
    font-family:Arial; font-size:1.4em;
    text-align:center;
  }
</style>
</head>
  
<body>

<div id="perfect">
  Imitation of a cloud...
</div>

</body>
</html>

An example of rounded borders set with the CSS border-radius properties and a background image:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#perfect {
    margin:25px auto; padding:4%;
    width:200px; height:125px;
    border:#aaabbb solid  4px; border-radius: 10px; 
    background-color:#e2e555;
    background:url('../../../img/tutorials/css_gallery_ex3b.jpg') center center no-repeat;
    background-size:cover;
    /* ADD proprietary selectors if needed */
  }
div {
    font-family:Arial; font-size:1.4em;
    text-align:center;
  }
</style>
</head>
  
<body>

<div id="perfect">
   Rounded borders with an image background...
</div>

</body>
</html>

An example of a leave-like rounded borders set with the CSS border-radius properties:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#perfect {
    margin:20px auto; padding:4%;
    width:205px; height:125px;
    background-color:#629632;
    border:5px groove rgba(98,150,50,0.7);
    border-top-right-radius:150px; border-bottom-left-radius:150px;
    /* ADD proprietary selectors if needed */
  }
div {
    font-family:Arial; font-size:1.4em;
    text-align:left;
  }
</style>
</head>
  
<body>

<div id="perfect">
  Imitation of a leave...
</div>

</body>
</html>

›› go to examples ››

Round borders in CSS3

Examples

An example of evenly rounded borders set with the CSS border-radius property:

An example of circled rounded borders set with the CSS border-radius property:

An example of a cloud-like rounded borders set with the CSS border-radius properties:

An example of rounded borders set with the CSS border-radius properties and a background image:

An example of a leave-like rounded borders set with the CSS border-radius properties:

Comments

About

Contact

Get Connected