Border radius is used to make the corner of the border curved. More the radius, more curved and round it will be. These classes can be applied to any division, image, buttons, containers, etc.
Sr. No.
|
Class
|
Description
|
1.
|
w3-round-small
|
It sets the border-radius of the element to 2px.
|
2.
|
w3-round
|
It sets the border-radius of the element to 4px.
|
3.
|
w3-round-medium
|
It works the same as w3-round and sets the border-radius of the element to 4px.
|
4.
|
w3-round-large
|
It sets the border-radius of the element to 8px.
|
5.
|
w3-round-xlarge
|
It sets the border-radius of the element to 16px.
|
6.
|
w3-round-xxlarge
|
It sets the border-radius of the element to 32px.
|
7.
|
w3-circle
|
It sets the border-radius to 50%.
|
In W3.CSS, the following classes as used in the code are used to implement a border-radius at all corners of the division.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksForGeeks</ title >
< link rel = "stylesheet" href =
< style >
/* CSS Style for Boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 6px;
background-color: #DCDCDC;
}
</ style >
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
< div class = "w3-container" >
< h3 class = "w3-text-blue" >
Round Bordered Divisions:
</ h3 >
< span class = "w3-round-small" ></ span >
< span class = "w3-round" ></ span >
< span class = "w3-round-medium" ></ span >
< span class = "w3-round-large" ></ span >
< span class = "w3-round-xlarge" ></ span >
< span class = "w3-round-xxlarge" ></ span >
< span class = "w3-circle" ></ span >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
02 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...