CSS Rounded Corners
Rounded corners on an element come from one CSS property: border-radius.
CSS border-radius Property
What border-radius controls is how large a radius each corner of the element gets.
It works on any element that has a background-color, a border, or a background-image.
Tip: Behind this shorthand sit the longhand properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
Example
Each of these three boxes has rounded corners: the first gets them on a background color, the second on a border, the third on a background image.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-radius Basics</title>
<style>
#div1 {
border-radius: 25px;
background-color: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2>CSS border-radius Property</h2>
<p>Rounded corners for an element with a background color:</p>
<div id="div1">
<p>Rounded corners!</p>
</div>
<p>Rounded corners for an element with a border:</p>
<div id="div2">
<p>Rounded corners!</p>
</div>
<p>Rounded corners for an element with a background image:</p>
<div id="div3">
<p>Rounded corners!</p>
</div>
</body>
</html>
CSS border-radius - Specify Each Corner
Anywhere from one to four values can be given to border-radius, and the count decides which corners each value reaches.
border-radius: 15px 50px 30px 5px; - with four values, the corners are assigned in turn: top-left, top-right, bottom-right, and finally bottom-left.
border-radius: 15px 50px 30px; - with three values, top-left takes the first, top-right and bottom-left share the second, and bottom-right takes the third.
border-radius: 15px 50px; - with two values, top-left and bottom-right share the first, while top-right and bottom-left share the second.
border-radius: 15px; - with one value, every one of the four corners gets the same rounding.
Example
One box per variation of the border-radius shorthand: one, two, three, and four values.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-radius - Specify Each Corner</title>
<style>
#div1 {
border-radius: 15px 50px 30px 5px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px 50px 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 15px 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 15px;
background: #04AA6D;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2>CSS border-radius - Specify Each Corner</h2>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<div id="div1"></div>
<p>Three values - border-radius: 15px 50px 30px:</p>
<div id="div2"></div>
<p>Two values - border-radius: 15px 50px:</p>
<div id="div3"></div>
<p>One value - border-radius: 15px:</p>
<div id="div4"></div>
</body>
</html>
CSS Elliptical and Circular Shapes
A corner turns elliptical when its radius has two values separated by a slash /: the horizontal radius comes first, then the vertical radius.
Setting border-radius to 50% gives a result that depends on the element's shape: a rectangular element becomes an oval, and a square one becomes a circle.
Example
Here border-radius produces elliptical, oval, and circular shapes.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Elliptical and Circular Shapes</title>
<style>
#div1 {
border-radius: 70px / 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px / 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>CSS Elliptical and Circular Shapes</h2>
<p>Elliptical corner - border-radius: 70px / 30px:</p>
<div id="div1"></div>
<p>Elliptical corner - border-radius: 15px / 50px:</p>
<div id="div2"></div>
<p>Oval shape - border-radius: 50% (rectangular element):</p>
<div id="div3"></div>
<p>Circle shape - border-radius: 50% (square element):</p>
<div id="div4"></div>
</body>
</html>