Skip to content
Related Articles

Related Articles

Improve Article

W3.CSS Round

  • Last Updated : 02 Mar, 2021

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 of the page -->
    <title>GeeksForGeeks</title>
  
    <!-- Adding W3.CSS file through external link -->
    <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>
    <!-- w3-container is used to add 
        16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
        content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Round Bordered Divisions in W3.CSS -->
    <div class="w3-container">
  
        <!-- Round Bordered Divisions -->
        <h3 class="w3-text-blue">
            Round Bordered Divisions:
        </h3>
          
        <!-- Below classes are used to add radius  
                 to the borders -->
        <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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :