W3.CSS Round Classes

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

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

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 ❯