W3.CSS Round
Rounded Corners
W3.CSS provides classes for adding rounded corners to any HTML element.
Rounded corners can be used on containers, cards, buttons, images, and more.
Round Classes
The w3-round classes add rounded corners to an element.
| Class | Radius |
|---|---|
w3-round-small |
2px |
w3-round |
4px |
w3-round-medium |
4px |
w3-round-large |
8px |
w3-round-xlarge |
16px |
w3-round-xxlarge |
32px |
w3-round and w3-round-medium both use a 4px radius.
Compare Rounded Corners
Choose a round class depending on how soft you want the corners to look.
w3-round-small
w3-round
w3-round-large
w3-round-xlarge
w3-round-xxlarge
Example
<div class="w3-panel w3-blue w3-round-small">...</div>
<div class="w3-panel w3-blue w3-round">...</div>
<div class="w3-panel w3-blue w3-round-large">...</div>
<div class="w3-panel w3-blue w3-round-xlarge">...</div>
<div class="w3-panel w3-blue w3-round-xxlarge">...</div>
Try it Yourself »
Rounded Cards
Round classes can be combined with cards, borders, and colors.
Mountain Trip
Explore mountains, lakes, and beautiful landscapes.
Example
<div class="w3-card w3-round-large">
<div class="w3-container">
<h2>Mountain Trip</h2>
<p>Explore mountains, lakes, and beautiful landscapes.</p>
<p><button class="w3-button w3-blue w3-round">Learn More</button></p>
</div>
</div>
Try it Yourself »
Rounded Buttons
Round classes can change the shape of buttons.
Example
<button class="w3-button w3-blue">Normal</button>
<button class="w3-button w3-blue w3-round">Round</button>
<button class="w3-button w3-blue w3-round-large">Large</button>
<button class="w3-button w3-blue w3-round-xxlarge">XXLarge</button>
Try it Yourself »
Rounded Images
Round classes can also be applied directly to images.
The Circle Class
The w3-circle class makes an element circular.
For a perfect circle, the element should have the same width and height.
Profile Pictures
The w3-circle class is useful for profile pictures and avatars.
John Doe
Web Designer
Example
<img src="img_avatar3.png" class="w3-circle" alt="Avatar" style="width:120px">
Try it Yourself »
What You Have Learned
- The
w3-roundclasses add rounded corners - Different round classes provide different corner sizes
- Round classes work with containers, cards, buttons, and images
- The
w3-circleclass creates circular elements - Elements need equal width and height to form a perfect circle
More Examples
Explore more ways to use rounded shapes.
Text Inside a Circle
W3.CSS
Text inside a circle
Example
<div class="w3-padding-32 w3-red w3-circle w3-center">
<h2>W3.CSS</h2>
<p>Text inside a circle</p>
</div>
Try it Yourself »
A Circle Inside a Circle
Round classes can be combined to create decorative shapes.
Hello
W3.CSS!
Example
<div class="w3-padding-32 w3-green w3-circle">
<div class="w3-padding w3-red w3-circle w3-center">
<p>Hello W3.CSS!</p>
</div>
</div>
Try it Yourself »
