CSS3 Basics

Rounded Corners

The border-radius Property

With CSS3, you can give any element "rounded corners" by using the border-radius property.


		border-radius: 20px;
		background-color: green;
		color: white;
		padding: 50px;

Rounded Corners


		border-radius: 0 0 20px 20px;

Only Bottom Rounded

Creating a Circle

A rectangle can be turned into a circle using only CSS. To create a circle, the border radius should be half of the height and the width.

The rectangle in the example below has a width and height of 200px. By setting the border radius to 100px, the corners will be rounded to form a circle.


		width: 200px;
		height: 200px;
		border-radius: 100px;
		background-color: limegreen;
		color: white;