CSS 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!

1. Rounded corners with background color:

2. Rounded corners with a border:

3. Rounded corners with a background image:

Output :

CSS border-radius – Specify Each Corner

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

1. 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
➤ Fourth value applies to bottom-left corner

2. Three Values

border-radius: 15px 50px 30px;
➤ First value applies to top-left corner
➤ Second value applies to top-right and bottom-left corners
➤ Third value applies to bottom-right corner

3. Two Values

border-radius: 15px 50px;
➤ First value applies to top-left and bottom-right corners
➤ Second value applies to top-right and bottom-left corners

4. One Value

border-radius: 15px;
➤ All four corners are rounded equally

Output :

You could also create elliptical corners:

Output 3: