It is a CSS property to round the corner of an element. The border-radius property is used to set the border-radius.
Rounded Corner property:
border-radius: border-radius property can contain one, two, three or four values.
- border-radius: 35px; It is used to set border-radius of each corners. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-botton-left-radius, border-bottom-right-radius. It sets all corner to the same value.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Rounded Corners</
title
>
<
style
>
.GFG {
border-radius: 35px;
background: #009900;
padding: 30px;
text-align:center;
width: 300px;
height: 120px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"GFG"
>
<
h2
>GeeksforGeeks</
h2
>
<
p
>border-radius: 35px;</
p
></
div
>
</
body
>
</
html
>
Output:
- border-radius: 20px 40px; This property is used to set first value as top-left and bottom right corner and second value as top right and bottom left corners.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Rounded Corners</
title
>
<
style
>
.GFG {
border-radius: 20px 40px;
background: #009900;
padding: 30px;
text-align:center;
width: 300px;
height: 120px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"GFG"
>
<
h2
>GeeksforGeeks</
h2
>
<
p
>border-radius: 20px 40px;</
p
></
div
>
</
body
>
</
html
>
Output:
- border-radius: 20px 40px 60px; This property is used to set first value to top-left corner, second value applied to top-right and bottom left corners and third value applied to bottom right corner.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Rounded Corners</
title
>
<
style
>
.GFG {
border-radius: 20px 40px 60px;
background: #009900;
padding: 30px;
text-align:center;
width: 300px;
height: 120px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"GFG"
>
<
h2
>GeeksforGeeks</
h2
>
<
p
>border-radius: 20px 40px 60px;</
p
></
div
>
</
body
>
</
html
>
Output:
- border-radius: 20px 40px 60px 80px; This property is used to set first, second, third and fourth value of border radius to top-left, top-right, bottom-right and bottom-left corners respectively.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Rounded Corners</
title
>
<
style
>
.GFG {
border-radius: 20px 40px 60px 80px;
background: #009900;
padding: 30px;
text-align:center;
width: 300px;
height: 120px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"GFG"
>
<
h2
>GeeksforGeeks</
h2
>
<
p
>border-radius: 20px 40px 60px 80px;</
p
></
div
>
</
body
>
</
html
>
Output:
border-top-left-radius: This property is used to set the value to top-left corner.
<!DOCTYPE html> < html > < head > < title >Rounded Corners</ title > < style > .GFG { border-top-left-radius: 35px; background: #009900; padding: 30px; text-align:center; width: 300px; height: 120px; } </ style > </ head > < body > < div class = "GFG" > < h2 >GeeksforGeeks</ h2 > < p >border-top-left-radius: 35px;</ p ></ div > </ body > </ html > |
Output:
border-top-right-radius: This property is used to set the value to top-right corner.
<!DOCTYPE html> < html > < head > < title >Rounded Corners</ title > < style > .GFG { border-top-right-radius: 35px; background: #009900; padding: 30px; text-align:center; width: 300px; height: 120px; } </ style > </ head > < body > < div class = "GFG" > < h2 >GeeksforGeeks</ h2 > < p >border-top-right-radius: 35px;</ p ></ div > </ body > </ html > |
Output:
border-bottom-left-radius: This property is used to set the value to bottom-left corner.
<!DOCTYPE html> < html > < head > < title >Rounded Corners</ title > < style > .GFG { border-bottom-left-radius: 35px; background: #009900; padding: 30px; text-align:center; width: 300px; height: 120px; } </ style > </ head > < body > < div class = "GFG" > < h2 >GeeksforGeeks</ h2 > < p >border-bottom-left-radius: 35px;</ p ></ div > </ body > </ html > |
Output:
border-bottom-right-radius: This property is used to set the value to bottom-right corner.
<!DOCTYPE html> < html > < head > < title >Rounded Corners</ title > < style > .GFG { border-bottom-right-radius: 35px; background: #009900; padding: 30px; text-align:center; width: 300px; height: 120px; } </ style > </ head > < body > < div class = "GFG" > < h2 >GeeksforGeeks</ h2 > < p >border-bottom-right-radius: 35px;</ p ></ div > </ body > </ html > |
Output:
mixed border-radius property: This property is used to set all corners as given value.
<!DOCTYPE html> < html > < head > < title >Rounded Corners</ title > < style > .GFG { border-top-left-radius: 35px; border-top-right-radius: 35px; border-bottom-left-radius: 35px; border-bottom-right-radius: 35px; background: #009900; padding: 30px; text-align:center; width: 300px; height: 120px; } </ style > </ head > < body > < div class = "GFG" > < h2 >GeeksforGeeks</ h2 > < p >border-top-left-radius: 35px; < br >border-top-right-radius: 35px; < br >border-bottom-left-radius: 35px; < br >border-bottom-right-radius: 35px;</ p ></ div > </ body > </ html > |
Output:
leave a comment
0 Comments