Categories
CSS Web development

CSS border-radius property

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

CSS border-radius property

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

Tip: The border-radius property is actually a shorthand property for the border-top-left-radiusborder-top-right-radiusborder-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:

CSS Border radius property

CSS border-radius 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:

CSS Border-radius

You can also create elliptical corners:

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

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

Output:

Advanced CSS border-radius

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

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

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

Output:

CSS Circle

Enjoy coding!