Creating a Border with Rounded Corners

The border-radius creates a border with rounded corners.

PropertyDescriptionValues
border-top-left-radiusSets the radius for a top left corner.A pair of length or percentage values related to the width and height of the border box.
border-top-right-radiusSets the radius for a top right corner.A pair of length or percentage values related to the width and height of the border box.
border-bottom-left-radiusSets the radius for a bottom left corner.A pair of length or percentage values related to the width and height of the border box.
border-bottom-rightradiusSets the radius for a bottom right corner.A pair of length or percentage values related to the width and height of the border box.
border-radiusThis shorthand property sets all corners at once.One or four pairs of length or percentage separated by a / character.

You define a curved corner by specifying two values for radius. The values are either as a length or as a percentage. The first value specifies the horizontal radius. The second specifies the vertical radius. Percentage values are of the horizontal and vertical size of the element's box.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: medium solid black; 
            border-top-left-radius: 20px 15px; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
  
Click to view the demo

If you supply only one value, then radius of both the horizontal and vertical use this value.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: medium solid black; 
            border-top-left-radius: 20px; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
  
Click to view the demo

To create space between an element's content and its border, add padding to the element.

The border-radius shorthand property specifies one value for all four corners, or four individual values.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: medium solid black; 
        } 
        #first { 
            border-radius: 20px / 15px; 
        } 
        </style> 
    </head> 
    <body> 
        <p id="first"> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
  
Click to view the demo

The following css uses four individual values.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: medium solid black; 
        } 
        #first { 
            border-radius: 50% 20px 25% 5em / 25% 15px 40px 55% 
        } 
        </style> 
    </head> 
    <body> 
        <p id="first"> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Related: