CSS Border Radius
Deze online generator helpt je bij het maken van de code die nodig is om afgeronde hoeken (border-radius) voor je webpagina's te maken. In deze tool wordt de CSS3 eigenschap (border-radius) gebruikt. Je kunt ervoor kiezen om alle hoeken dezelfde straal te geven of elke hoek afzonderlijk aan te passen.
De CSS eigenschap border-radius
Met de CSS eigenschap border-radius kun je een afgeronde hoek maken of de hoeken van een element afronden. De waarde van de eigenschap bepaalt de straal van de cirkel. Wanneer je de eigenschap gebruikt, wordt in plaats van de gebruikelijke rechte hoeken van het element te tekenen, een afgerond frame met afgeronde hoeken gebruikt volgens een cirkelboog met een bepaalde straal. De CSS-eigenschap border-radius kan één tot vier waarden bevatten, gescheiden door spaties. Het aantal waarden bepaalt hoeveel hoeken worden ingesteld. Als er meer dan één waarde is opgegeven, wordt de hoekafronding ingesteld vanaf de linkerbovenhoek. De online border radius generator tool maakt het maken van ronde hoeken met css extra eenvoudig doordat je zelf de code niet hoeft te schrijven.
Meer mogelijkheden met border-radius
Er zijn echter meer mogelijkheden voor deze eigenschap. Stel je wilt geen ronde hoeken maar een element met ovale hoeken:
border-radius: 40px / 20px;
Meer voorbeelden:
border-radius: 20px 70px / 40px 90px;
border-radius:
20px 70px 40px 80px / 90px 50px 30px 60px;
border-radius:
40px 250px 250px 40px / 20px 100px 100px 20px;
Of in procenten:
border-radius:
10% 50% 50% 10% / 5% 50% 50% 5%;
En voor een mooie ovaal stel je alle hoeken in op 50%:
Doe je ditzelfde met een vierkant dan krijg je een perfecte circel:
Met de border-radius css eigenschap kun je dus veel meer doen dan alleen afgeronde hoeken maken. Gebruik verschillende waardes in pixels of procenten om verschillende vormen te maken.
SeoSos.nl
