W3.CSS ronde klassen


w3-rond-klein

w3-ronde

w3-rond-groot

w3-rond-xlarge

w3-rond-xxgroot

De klassen w3-round- size voegen afgeronde hoeken toe aan elk HTML-element:

Klas definieert
w3-ronde Element afgerond (grens-radius) 4px
w3-rond-klein Element afgerond (grens-radius) 2px
w3-rond-medium Element afgerond (grens-radius) 4px
w3-rond-groot Element afgerond (grens-radius) 8px
w3-rond-xlarge Element afgerond (grens-radius) 16px
w3-rond-xxgroot Element afgerond (grens-radius) 32px

Voorbeeld

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

De Cirkel Klas

De klasse w3-circle geeft inhoud binnen een cirkel weer.


Een afbeelding in een cirkel

Voorbeeld

<img class="w3-circle" src="img_car.jpg" alt="Car">


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>

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>

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>