---
title: CSS Rounded Corners
description: "## CSS Rounded Corners With the CSS `border-radius` property, you can give any element \"rounded corners\". ##   ## CSS border-radius Property The CSS `border-radius` property defines the radius of an element’s corners. **Tip:** This property allows you to add rounded corners to…"
url: "https://apprentice.mn/docs/css-rounded-corners/"
updated: "2021-05-11"
category: CSS
---

# CSS Rounded Corners

## CSS Rounded Corners

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

##  

## CSS border-radius Property

The CSS `border-radius` property defines the radius of an 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. Rounded corners for an element with a border:

Rounded corners!

3.Rounded corners for an element with a background image:

Rounded corners!

Here is code

     `#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 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::

Here is code:

     `#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 could also create elliptical corners:

     `#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;
}`

## CSS Rounded Corners Properties

| Property | Description |
| --- | --- |
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-rounded-corners%2F&linkname=CSS%20Rounded%20Corners](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-rounded-corners%2F&linkname=CSS%20Rounded%20Corners)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-rounded-corners%2F&linkname=CSS%20Rounded%20Corners](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-rounded-corners%2F&linkname=CSS%20Rounded%20Corners)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-rounded-corners%2F&linkname=CSS%20Rounded%20Corners](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-rounded-corners%2F&linkname=CSS%20Rounded%20Corners)[https://www.addtoany.com/share](https://www.addtoany.com/share)