#Roundedcorners Archives

You can give any element/ image “rounded corners” with the CSS border-radius property.

The CSS border-radius property specifies the radius of an element’s corners.

Tip: The CSS border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Example:

<!doctype html>
<html>
<head>
<title></title>
<style>
.square {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius:30px;
		}
</style>
</head>

<body>
	<div class="square"></div>
</body>
</html>

Output:

The CSS border-radius property can have from one to four values (specify each corner). Here are the rules:

<!doctype html>
<html>
<head>
<title></title>
<style>
.square {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius:30px 50px 10px 60px;
		}
</style>
</head>

<body>
	<div class="square"></div>
</body>
</html>

Output:

You can also create elliptical corners:

<!doctype html>
<html>
<head>
<style>
      .square {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius:30px/60px;
		}
</style>
</head>

<body>
<div class="square"></div>
</body>
</html>

Output:

To create a circle, use the border-radius property and set the value to 50%:

<!doctype html>
<html>
<head>
<style>
   .circle {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius:50%;	
		}
</style>
</head>

<body>
<div class="circle"></div>
</body>
</html>

Output:

Enjoy coding!