CSS3 Border Radius Property

The border-radius property is used to add rounded corners to an element.
The border-radius property is a shorthand property for setting the four border-*-radius properties.
If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.

If Set Four values: First value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner.
If Set Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right corner.
If Set Two values: First value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner.
If Set One value: Value applied on All four corners.

Example 1 – CSS3 Border Radius Property For All Corner.

.box{
  border-radius: 5px;
  width:100px;
  height:100px;
  border:1px solid #000;
}

Example 2 – CSS3 Border Radius Property For Top-Left.

.box{
  border-top-left-radius: 5px;
  width:100px;
  height:100px;
  border:1px solid #000;
}

Example 3 – CSS3 Border Radius Property For Top-Right.

.box{
  border-top-right-radius: 5px;
  width:100px;
  height:100px;
  border:1px solid #000;
}

Example 4 – CSS3 Border Radius Property For Bottom-Left.

.box{
  border-bottom-left-radius: 5px;
  width:100px;
  height:100px;
  border:1px solid #000;
}

Example 5 – CSS3 Border Radius Property For Bottom-Right.

.box{
  border-bottom-right-radius: 5px;
  width:100px;
  height:100px;
  border:1px solid #000;
}

Example 5 – CSS3 Border Radius Property For All Borders Diff-2.

.box{
  border-radius: 5px 10px 15px 20px;
  width:100px;
  height:100px;
  border:1px solid #000;
}

Mukesh Jakhar - PHP Web Developer
Mukesh Jakhar

This is Mukesh Jakhar. I’m a professional web developer with 3+ years experience. I am always ready for freelance work and i am writing blogs in my free time. I love to learn new technologies and share with others.

I founded PHPKIDA in September 2015. The focus of this website to provide web development tutorials of PHP, WordPress, CodeIgniter, Jquery, MySQL, HMTL, CSS etc and sharing solution to problems which i already solved.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.