Online Snippets Library

Create rounded corners in CSS

To create rounded corners, We will use CSS3 border-radius property.border-radius property is supported by all latest browser like Opera, Firefox, Safari, Chrome.

Syntax

border-radius: length;

We can set border radius for each corner separately.

Four values:first value set border-radius to top-left, second value set border-radius to top-right, third value set border-radius to bottom-right, and fourth value set border-radius to bottom-left corner.

Three values: first value applies set border-radius to top-left, second value set border-radius to top-right and bottom-left, and third value set border-radius to bottom-right.

Two values: first value set border-radius to top-left and bottom-right corner, and the second value set border-radius to top-right and bottom-left corner

One value: Set border-radius to all four corners equally.

Example

<!DOCTYPE html>
<html>
<head>
<title>Set border-radius in CSS | Tutsway.com</title>
<style type="text/css">
#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #42a5f5;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners3 {
    border-radius: 15px 50px 30px;
    background: #42a5f5;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners2 {
    border-radius: 15px 50px;
    background: #42a5f5;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners1 {
    border-radius: 15px;
    background: #42a5f5;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
</style>
</head>
<body>
<h1>Set border-radius in CSS</h1>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<div id="rcorners4"></div>

<p>Three values - border-radius: 15px 50px 30px:</p>
<div id="rcorners3"></div>

<p>Two values - border-radius: 15px 50px:</p>
<div id="rcorners2"></div>

<p>set border-radius for all four corner.</p>
<div id="rcorners1"></div>
</body>
</html>