HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Rounded Corners

❮ Previous Next ❯

CSS Rounded Corners

You can make the corners of an element look curved using CSS by using the 'border-radius' property.

CSS Rounded Corners

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

CSS border-radius Property

The "border-radius" in CSS decides how curved or rounded the corners of an object should look.

Tip: This option allows you to create a rounded appearance for object edges!

Here are three examples:

1. Creating rounded corners for an element with a particular background color:

Rounded corners!

2. Make the edges of an element with a border look curved:

Rounded corners!

3. Creating curved edges for an element that has a picture in the background:

Rounded corners!

Here is the code:

Example

#rcorners1 {
  border-radius: 25px;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}

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

Tip: The 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.

CSS border-radius - Specify Each Corner

You can adjust the roundness of corners on an element using the "border-radius" property in HTML. You can specify this property with anywhere from one to four values. Here are the rules for using it:

The first measurement of 15 pixels is for the top-left corner, the second measurement of 50 pixels is for the top-right corner, the third measurement of 30 pixels is for the bottom-right corner, and the fourth measurement of 5 pixels is for the bottom-left corner.

The first number, 15px, represents the radius for the top-left corner. The second number, 50px, is used for both the top-right and bottom-left corners. Finally, the third number, 30px, sets the radius for the bottom-right corner.

In HTML, you can make round corners on elements by using the 'border-radius' property. You can set it with two values: '15px' and '50px'. The first value makes the top-left and bottom-right corners round, and the second value makes the top-right and bottom-left corners round.

Set one value for rounded corners: border-radius: 15px; This value will make all four corners equally rounded.

Here is the code:

Example

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners4 {
  border-radius: 15px;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}
Try it Yourself »

You could also create elliptical corners:

Example

#rcorners1 {
  border-radius: 50px / 15px;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: rgb(0 151 167);
  padding: 20px;
  width: 200px;
  height: 150px;
}
Try it Yourself »
❮ Previous Next ❯