Loading lesson path

CSS•Advanced Styling

CSS Rounded Corners

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Rounded Corners?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___-radius: 25px;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

CSS border-radius - Specify Each Corner

CSS border-radius Property

CSS Rounded Corners

The CSS border-radius property is used to create rounded corners for elements.

CSS border-radius Property

The border-radius property defines the radius of an element's corners.

This property can be applied to all elements with a background-color , a border , or a background-image .

Here are three examples

Rounded corners for an element with a background color:

Rounded corners!

Rounded corners for an element with a border:

Rounded corners!

Rounded corners for an element with a background image:

Rounded corners!

Example

Formatted code

#div1 {
  border-radius: 25px;
  background-color: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#div2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
#div3 {
  border-radius: 25px;
  background-image: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Live preview

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

The border-radius property can have from one to four values. Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Example

Formatted code

#div1 {
  border-radius: 15px 50px 30px 5px; /* four values */
  background: #04AA6D;
  width: 200px;
  height: 150px;
}
#div2 {
  border-radius: 15px 50px 30px; /* three values */
  background: #04AA6D;
  width: 200px;
  height: 150px;
}
#div3 {
  border-radius: 15px 50px; /* two values */
  background: #04AA6D;
  width: 200px;
  height: 150px;
}
#div4 {
  border-radius: 15px; /* one value */
  background: #04AA6D;
  width: 200px;
  height: 150px;
}

Live preview

CSS Elliptical and Circular Shapes

To create elliptical corners, you must specify two values for each radius, separated by a slash /. The first value defines the horizontal radius, and the second value defines the vertical radius.

To create a oval shape (for a rectangular element), or to create a circular shape (for a square element) set border-radius to 50%.

Example

Formatted code

#div1 {
  border-radius: 70px / 30px;
  background: #04AA6D;
  width: 200px;
  height: 150px;
}
#div2 {
  border-radius: 15px / 50px;
  background: #04AA6D;
  width: 200px;
  height: 150px;
}
#div3 {
  border-radius: 50%;
  background: #04AA6D;
  width: 200px;
  height: 150px;
}
#div4 {
  border-radius: 50%;
  background: #04AA6D;
  width: 200px;
  height: 200px;
}

Live preview