Rounded Corner in CSS: A Practical Guide

The Rounded Corner in CSS is the use of the border-radius attribute to circle the elements.

The Border-radius property in CSS

The Border-radius attribute in CSS helps determine the radius of the element's corners and round it to that radius.

For instance,:

1. Bo round the corners of an element with the specified background color

 #rcorners1 { 
  border-radius: 25px; 
  background: #58257b; 
  color:white; 
  padding: 20px; 
  width: 200px; 
  height: 150px; 
 } 

2. Round the corners of an outer border element

 #rcorners2 { 
  border-radius: 25px; 
  border: 2px solid #58257b; 
  padding: 20px; 
  width: 200px; 
  height: 150px; 
 } 

3. Bo round the corners of an element with the background as a defined image

 #rcorners3 { 
  border-radius: 25px; 
  background: url(paper.gif); 
  background-position: left top; 
  background-repeat: repeat; 
  padding: 20px; 
  width: 200px; 
  height: 150px; } 

Full code:

Border-radius attribute

Round the corners of an element with the specified background color:

Rounded Corner in CSS

Bo round the corners of an outer border element:

Rounded Corner in CSS

Bo round the corners of an element with the background as a defined image

Rounded Corner in CSS

The value of the corners of border-radius

The border-radius attribute can have from one to four values. First you need to distinguish the corners in an element:

1. Corner-1: top-left corner
2. Corner-2: top-right corner
3. Corner-3: bottom-right corner
4. Corner-4: bottom-left corner

1. The border-radius case has 4 values

These four values will correspond to four corners: border-radius: angle-1 angle-2 angle-3 angle-4

For instance,:

 #rcorners1 { 
  border-radius: 15px 50px 30px 5px; 
  background: #58257b; 
  padding: 20px; 
  width: 200px; 
  height: 150px; 
 } 

2. The border-radius case has 3 values

These three values correspond to the following:

1. First value: Angle -1
2. Second value: Angle-2 and Angle-4
3. Third value: Angle-3

For instance,:

 #rcorners2 { 
  border-radius: 15px 50px 30px; 
  background: #58257b; 
  padding: 20px; 
  width: 200px; 
  height: 150px; 
 } 

3. The border-radius case has 2 values

These two values correspond to the following:

1. First value: Angle -1 and Angle-3
2. Second value: Angle-2 and Angle-4

For instance,:

 #rcorners3 { 
  border-radius: 15px 50px; 
  background: #58257b; 
  padding: 20px; 
  width: 200px; 
  height: 150px; 
 } 

4. Border-radius case has 1 value

This value applies to all four corners, creating an image with equal angles

For instance,:

 #rcorners4 { 
  border-radius: 15px; 
  background: #58257b; 
  padding: 20px; 
  width: 200px; 
  height: 150px; 
 } 

Full code :

The value of the corners of border-radius

Border-radius: 15px 50px 30px 5px:

Border-radius: 15px 50px 30px: