- CSS Rounded Corners
- How to Make Rounded Corners in CSS?
- Example:
- Make Individual Corner Rounded
- Example:
- CSS Rounded Corners – The Shorthand Property
- Example:
- Create a Circle in CSS
- Example:
- Make Rounded Corner Images in CSS
- Example:
- Make Rounded Corner Buttons in CSS
- Example:
- Make Circle Buttons in CSS
- Example:
- Make Rounded Corner Table in CSS
- Example:
- Example:
- Related Articles
- Related posts:
- CSS Rounded Corners
- CSS border-radius Property
- Example
- CSS border-radius — Specify Each Corner
- Example
- Example
- CSS Rounded Corners Properties
- border-radius
- Try it
- Constituent properties
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- Live Samples
- Specifications
- Browser compatibility
CSS Rounded Corners
When you are designing a webpage, your main focus is always to improve the visitor’s overall experience. To achieve this you can’t ignore even the small things like the corners of the elements.
Rounded corners of elements like images, tables, boxes, buttons, etc. can make their appearance much better. In this tutorial, we will discuss how to make rounded corners in CSS.
How to Make Rounded Corners in CSS?
To make the corners of an element rounded we use the border-radius property. The border-radius property defines the radius of an element’s corners. It can be specified in px, em, rem, etc.
Each of the three boxes given below has a border-radius of 20px. Therefore their corners look rounded.
Rounded Corners with a background color
Rounded Corners with only a border
Rounded Corners with a background image
Example:
Make Individual Corner Rounded
In the last example, we discussed how we can make all of the corners of an element rounded. But, you might sometimes need to make each corner rounded individually.
These four properties specify the border radius of the top-left, top-right, bottom-left, and bottom-right corners respectively.
Bottom-left Corner Rounded!
Bottom-right Corner Rounded!
Example:
CSS Rounded Corners – The Shorthand Property
There might sometimes be situations where you have to make each corner rounded but with a different border-radius. The one way to do this is specifying each corner radius individually as we saw in the last example.
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
So instead of specifying each corner radius individually, we can specify them at once using the border-radius property. It can accept one to four values at a time. Let’s discuss each:
- border-radius: 20px 40px 60px 80px
- top-left corner radius will be 20px
- top-right corner radius will be 40px
- bottom-right-corner-radius will be 60px
- bottom-left-corner-radius will be 80px
- border-radius: 20px 40px 60px
- top-left corner radius will be 20px
- top-right and bottom-left corners radius will be 40px
- bottom-right corner radius will be 60px
- border-radius: 20px 40px
- top-left and bottom-right corners radius will be 20px
- top-right and bottom-left corners radius will be 40px
Example:
Create a Circle in CSS
The border-radius can also be specified using % value. It can help us to create perfect circles.
To make an element a perfect circle, we have to set its border-radius to 50%. But, remember that the height and width of the element must be exactly the same. Otherwise, it may result in some other shape of the element.
Circle with a background color!
Circle with a background image!
Example:
Make Rounded Corner Images in CSS
Just like the element, we can also apply the border-radius property to an image to make its corners rounded. The border-radius property can be applied to any individual corner or all corners of the image just like the div element.
Example:
Make Rounded Corner Buttons in CSS
Just like other elements, we can also make a button’s corners rounded using the border-radius property.
Example:
.btn < border: none; padding: 7px 26px; text-align: center; color: white; background: #dc3545; >.btn1 < border-radius: 2px; >.btn2 < border-radius: 4px; >.btn3 < border-radius: 10px; >.btn4 < border-radius: 15px; >.btn5
Make Circle Buttons in CSS
To create a circle button in CSS, make the height and width of the button the same and set its border-radius to 50%. If the width and height of the button are not the same, it will never result in a circle.
Example:
.btn < width: 50px; height:50px; border-radius: 50%; border: none; color: white; padding: 0px; text-align:center; >.btn1 < background: #dc3545; >.btn2 < background: #28a745; >.btn3 < background: #ffc107; >.btn:hover
Make Rounded Corner Table in CSS
The border-radius property can also be used to make a table’s corners rounded.
Look at the following table, it has all four corners rounded.
Example:
table < border-spacing: 0; border: 1px solid black; border-radius: 10px; >td, th < border-left: 1px solid black; border-top: 1px solid black; padding: 10px; >th < border-top: none; >td:first-child, th:first-child
If you want to make only the header’s corners rounded, you have to use the border-top-left-radius and border-top-right-radius properties to set them individually.
Here is the code with a slight modification:
Example:
table < border-spacing: 0; border: 1px solid black; border-top-left-radius: 10px; border-top-right-radius: 10px; >td, th < border-left: 1px solid black; border-top: 1px solid black; padding: 10px; >th < border-top: none; >td:first-child, th:first-child
Related Articles
Related posts:
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!
1. Rounded corners for an element with a specified background color:
2. Rounded corners for an element with a border:
3. Rounded corners for an element with a background image:
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 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
#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:
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;
>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 border-radius
The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Try it
The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip property.
The border-radius property does not apply to table elements when border-collapse is collapse .
Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: revert; border-radius: revert-layer; border-radius: unset;
The border-radius property is specified as:
Values
radius Is a or a denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax. top-left-and-bottom-right Is a or a denoting a radius to use for the border in the top-left and bottom-right corners of the element’s box. It is used only in the two-value syntax. top-right-and-bottom-left Is a or a denoting a radius to use for the border in the top-right and bottom-left corners of the element’s box. It is used only in the two- and three-value syntaxes. top-left Is a or a denoting a radius to use for the border in the top-left corner of the element’s box. It is used only in the three- and four-value syntaxes. top-right Is a or a denoting a radius to use for the border in the top-right corner of the element’s box. It is used only in the four-value syntax. bottom-right Is a or a denoting a radius to use for the border in the bottom-right corner of the element’s box. It is used only in the three- and four-value syntaxes. bottom-left Is a or a denoting a radius to use for the border in the bottom-left corner of the element’s box. It is used only in the four-value syntax. Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.
border-radius: 1em/5em; /* It is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px; /* It is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
Formal definition
- border-top-left-radius : 0
- border-top-right-radius : 0
- border-bottom-right-radius : 0
- border-bottom-left-radius : 0
- border-bottom-left-radius : two absolute s or s
- border-bottom-right-radius : two absolute s or s
- border-top-left-radius : two absolute s or s
- border-top-right-radius : two absolute s or s
- border-top-left-radius : a length, percentage or calc();
- border-top-right-radius : a length, percentage or calc();
- border-bottom-right-radius : a length, percentage or calc();
- border-bottom-left-radius : a length, percentage or calc();
Formal syntax
Examples
pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre> pre id="example-2"> border: groove 1em red; border-radius: 2em; pre> pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre> pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre> pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre> pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre> pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre>
pre margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1 border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2 border: groove 1em red; border-radius: 2em; > pre#example-3 background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4 border: none; border-radius: 40px 10px; background: gold; > pre#example-5 border: none; border-radius: 50%; background: burlywood; > pre#example-6 border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7 border: dashed; border-width: 2px 4px; border-radius: 40px; >Live Samples
Specifications
Browser compatibility
BCD tables only load in the browser
