Next chapter (CSS3 Layout - Multi columns)

CSS Rounded Corners

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags or JavaScript.

Other examples in Rounded corners (CSS3 Layout)

Result from the Online TryIt-Editor

<!doctype html>
<html>
  <head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
      .div1
      {
        width:200px;
        height:100px;
        border-top-left-radius:15px;
        background-color: rgb(250,20,70);
        
      }
      .div2
      {
        width:200px;
        height:100px;
        border-top-right-radius:15px;
        background-color: rgb(250,200,100);
        margin-top:-100px;
        margin-left:300px;
        
      }
      
      .div3
      {
        width:200px;
        height:100px;
        border-bottom-left-radius:15px;
        background-color: rgb(150,20,70);
        
      }
      
      .div4
      {
        width:200px;
        height:100px;
        border-bottom-right-radius:15px;
        background-color: rgb(50,20,70);
        margin-top:-100px;
        margin-left:300px;
        
      }
      
    </style>
  </head>
  
  <body>
    <h3>
      CSS3 Rounded Corners
    </h3>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
    <br />
    <div class="div3">
    </div>
    <div class="div4">
    </div>
  </body>
</html>

^1.0

^5.0

^4.0

^9.0

^10.5

CSS Rounded Corners

Useful Information