Border-radius | Ronde hoeken met CSS3

Met de CSS3 border-radius propertie kun je zonder behulp van plaatjes, vele div’s of andere technieken ronde hoeken maken in je design. Border-radius is misschien wel de meest besproken CSS3 propertie.

Als straks alle browsers volledig CSS3 gaan ondersteunen is het vrij simpel en zal bij het volgende voorbeeld alle hoeken van de desbetreffende div afgerond worden met 15 pixels naar binnen:

border-radius: 15px;

Hoe werkt het in princiepe

Je hebt voor elke hoek een CSS3 propertie namelijk:

Hierbij kun je 2 waardes opgeven om een afgeronde hoek te maken. De eerste waarde die je opgeeft is naar links of rechts en de tweede is naar boven of onder afhankelijk van de propertie die je gebruikt. Om alle hoeken in één CSS regel te stoppen gebruik je de volgende short-hand code:

border-radius: 15px 10px 15px 10px / 10px 15px 10px 5px;

Als zoals in het voorbeeld alle 4 de waardes zijn opgegeven voor alle hoeken dan zal de volgorde als volgt zijn: top-left, top-right, bottom-right en bottom-left. De “/” kun je ook nog gebruiken om de hoogte van de afronding aan te passen.

Browser support

Support

Support

no-support

Support

Support

Vorige Portfolio item

Meer nieuws items

Vorige Portfolio item

Nieuws