Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JQUERY JAVA MORE FORUM EXERCISES REFERENCES

W3.CSS Round Classes

❮ Previous Next ❯

w3-round-small

w3-round

w3-round-large

w3-round-xlarge

w3-round-xxlarge

The w3-round-size classes add rounded corners to any HTML element:

Class Defines
w3-round Element rounded (border-radius) 4px
w3-round-small Element rounded (border-radius) 2px
w3-round-medium Element rounded (border-radius) 4px
w3-round-large Element rounded (border-radius) 8px
w3-round-xlarge Element rounded (border-radius) 16px
w3-round-xxlarge Element rounded (border-radius) 32px

Example

<div class="w3-round w3-teal">w3-round</div>
Try It Yourself »

The Circle Class

The w3-circle class displays content inside a circle.

An Image Inside a Circle

Example

<img class="w3-circle" src="img_car.jpg" alt="Car">
Try It Yourself »

Text Inside a Circle

Text inside a circle

Example

<div class="w3-padding-32 w3-red w3-circle w3-center">
  <h1>The w3-circle Class</h1>
</div>
Try It Yourself »

A Circle Inside a Circle

Hello
W3.CSS!

Example 1

<div class="w3-padding-32 w3-green w3-circle">
  <img src="img_car.jpg" class="w3-circle" style="width:75%">
</div>
Try It Yourself »

Example 2

<div class="w3-padding-32 w3-green w3-circle">
  <div class="w3-padding-32 w3-red w3-circle w3-center" style="width:55%">
    <p class="w3-xlarge">Hello<br>W3.CSS!</p>
  </div>
</div>
Try It Yourself »

❮ Previous Next ❯