Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Rounded Corners

10 minutes

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Rounded Corners

CSS border-radius Property

The CSS border-radius property determines the curvature radius of a element’s corners.

Tip: This property allows you to add rounded corners to elements!

Here are three examples:

1. Rounded corners for an element with a specified background color:

Rounded corners!

2. Applying rounded corners to an element featuring a border:

Rounded corners!

3. Curved edges for an element with a background image:

Below is the code:

Example

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  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;
}

Tip: The border-radius property serves as a shorthand for the individual properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

CSS border-radius – Specify Each Corner

The border-radius property can accept between one to four values. Here are the guidelines:

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

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

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

One value – border-radius: 15px; (The value applies equally to all four corners, rounding them uniformly:

Below is the provided code:

Example

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

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

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

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

You can also achieve elliptical corners.

Example

#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}