View Categories

CSS Rounded Corners

3 min read

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-radiusborder-top-right-radiusborder-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

Powered by BetterDocs

Leave a Reply