toolsmoah

Border Radius Generator

Visueel CSS border-radius eigenschappen maken en bekijken.

Gegenereerde CSS
Pas de ronding van elke hoek aan
Voorbeeld
Bekijk het gegenereerde border-radius effect
Voorbeeld
Gegenereerde CSS
border-radius: 20px;
Voorbeelden
Klik op vooraf gedefinieerde border-radius stijlen om ze toe te passen
Border Radius Eigenschappen

Eigenschappenvolgorde

De border-radius eigenschap wordt met de klok mee toegepast: linksboven → rechtsboven → rechtsonder → linksonder

Afgekorte eigenschappen

  • • border-radius: 10px; - Wordt toegepast op alle vier de hoeken
  • • border-radius: 10px 20px; - Eerste wordt toegepast op linksboven en rechtsonder, tweede op rechtsboven en linksonder
  • • border-radius: 10px 20px 30px; - Eerste wordt toegepast op linksboven, tweede op rechtsboven en linksonder, derde op rechtsonder
  • • border-radius: 10px 20px 30px 40px; - Wordt toegepast op linksboven, rechtsboven, rechtsonder en linksonder in die volgorde

Gebruikstips

  • • Gebruik 50% om een perfecte cirkel te maken
  • • 4-8px is meestal goed voor knoppen
  • • 8-16px is gebruikelijk voor kaarten en panelen
  • • Asymmetrische radius kan unieke ontwerpeffecten creëren
    Border Radius Generator | toolsmoah