Lav cirkler med CSS3

Nu har vi jo set at man kunne lave trekanter vha. CSS, men kan man også lave cirkler? Ja da! Med CSS3’s border-radius attributen er det faktisk muligt, og det er nemt!

Ja, udover at have gjort livet meget nemmere for os webudviklere, så er den nye border-radius attribut faktisk i stand til at lave cirkler.

Det eneste man behøver er at lave en firkant og derefter tilføje en border-radius der er halv så stor som bredden/højden af firkanten:

Med border-radius laves en firkant om til en cirkel

Så først vores firkant der er 140px bred og høj:

.firkant {
  width: 140px;
  height: 140px;
  background-color: #64addb;
}

Den tilføjer vi til en div:

<div class="firkant"></div>

Da bredden og højden var på 140px skal vores border-radius være på 70px:

.rund {
  border-radius: 70px;
}

Den nye klasse tilføjes vores div og voila vi har en cirkel. And thats it!

Browser support

Det lyder jo godt at kunne lave cirkler så nemt, men hvad med browser supporten? Den er god! Der er faktisk support for den i alle nye browsere: Can I Use: border-radius?.

Kommentarer

  1. Ja CSS3 er en dejlig ting for os der arbejder med webdesign.
    Når IE10 kommer på banen og vi kan begrave IE8, som vi har gjort med IE7, ja så begynder det at blive rigtigt sjovt ….. og nemt :-)

  2. Rettelse til indlægget – i stedet for at dele bredden med 2, så kan man nu bruge % til radius:

    border-radius: 50%;

    Vupti, fin cirkel :D

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.