QuitExams

W3.CSS Round Classes

W3.CSS provides multiple classes to round element corners with different border-radius values.

1️⃣ w3-round

Element rounded with border-radius: 4px.

<div class="w3-round w3-padding w3-blue">w3-round</div>

2️⃣ w3-round-small

Element rounded with border-radius: 2px.

<div class="w3-round-small w3-padding w3-green">w3-round-small</div>

3️⃣ w3-round-medium

Element rounded with border-radius: 4px.

<div class="w3-round-medium w3-padding w3-red">w3-round-medium</div>

4️⃣ w3-round-large

Element rounded with border-radius: 8px.

<div class="w3-round-large w3-padding w3-orange">w3-round-large</div>

5️⃣ w3-round-xlarge

Element rounded with border-radius: 16px.

<div class="w3-round-xlarge w3-padding w3-purple">w3-round-xlarge</div>

6️⃣ w3-round-xxlarge

Element rounded with border-radius: 32px.

<div class="w3-round-xxlarge w3-padding w3-teal">w3-round-xxlarge</div>