Page 1 of 1

CSS Rounded Corners

Posted: Fri Oct 27, 2023 8:24 am
by Guest
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 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; }
Try it Yourself »


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 the 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; }
Try it Yourself »

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;}
Try it Yourself »



Test Yourself With Exercises

Exercise:
Give the div element rounded corners.


<style>
div {
background: red;
: 10px;
}
</style>

<body>
<div>This is a div element. It has some text.</div>
</body>



Submit Answer »
Start the Exercise



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















+1

Reference: https://www.w3schools.com/css/css3_borders.asp