Softonic

CSS border-radius-generator

Stap 1 / 2 CSS genereren
Resultaten

border-radius lijkt eenvoudig, totdat je probeert uit te leggen waarom 50% op een vierkant een cirkel oplevert, maar 50% op een rechthoek een ovaal. Met deze generator voer je voor elk van de vier hoeken een waarde in, kies je tussen px, % en rem en kopieer je de exacte verkorte notatie die hij oplevert. Handig voor knopvormen, kaarthoeken, pilvormige knoppen (pill) en asymmetrische hoeken.

Een border-radius opbouwen

  1. 1

    Stel elke hoek in

    Voer een straal in voor de hoeken linksboven, rechtsboven, rechtsonder en linksonder.

  2. 2

    Kies de eenheid

    Pixels (vaste grootte), procent (relatief aan het element) of rem (relatief aan de lettergrootte van de root).

  3. 3

    Genereer de CSS

    Druk op Generate CSS om de verkorte notatie te maken.

  4. 4

    Kopieer de regel

    Kopieer de `border-radius`-verkorte notatie en plak die in je stylesheet.

Volgorde van de verkorte notatie

border-radius: top-left top-right bottom-right bottom-left;

Net als bij margin / padding: met de klok mee, beginnend linksboven. Weggelaten waarden spiegelen de tegenoverliggende hoek. Dus border-radius: 10px 20px; betekent 10px linksboven en rechtsonder, en 20px rechtsboven en linksonder.

Wat deze generator niet doet

Hij stelt per hoek één straal in, dus hij maakt nooit elliptische hoeken (de tweewaardige vorm met een schuine streep, zoals border-radius: 20px 10px / 5px 15px;) of uitgeschreven eigenschappen als border-top-left-radius. Heb je die nodig, schrijf de CSS dan met de hand.

Procent versus pixels

Eenheid Gedrag
px Vast, schaalt niet mee met de grootte van het element
% Percentage van de breedte (horizontaal) en hoogte (verticaal) van het element
em Schaalt mee met de lettergrootte van het element
rem Schaalt mee met de lettergrootte van de root

50% op een vierkant element = cirkel. Op een rechthoek van 200×100 is 50% een horizontale straal van 100px plus een verticale straal van 50px = ellips.

Veelvoorkomende vormen

Vorm CSS
Cirkel (vierkant) border-radius: 50%;
Pil (pill) border-radius: 9999px; (elke waarde ≥ de helft van de hoogte)
Afgeronde kaart border-radius: 8px; of 12px
Chatbubbel border-radius: 18px 18px 0 18px; (staart rechtsonder)
Subtiel border-radius: 2px; of 4px

De regel ‘de helft van de hoogte’ voor pilvormen

Een pilvormige knop (pill) is een rechthoek waarvan de linker- en rechterkant perfecte halve cirkels zijn. Om dat betrouwbaar te bereiken, stel je border-radius in op minstens de helft van de hoogte van het element. 9999px (of een willekeurig zeer grote waarde) gebruiken is veilig, omdat de browser de straal begrenst tot de werkelijke geometrie.

Interactie met overflow

border-radius snijdt standaard alleen de achtergrond, rand en box-shadow af. Om onderliggende elementen (afbeeldingen, geneste elementen) tot de afgeronde vorm bij te snijden, voeg je toe:

overflow: hidden;

of gebruik isolation: isolate + overflow: hidden om ook stapelcontexten (stacking contexts) in te sluiten.

Toegankelijkheidsnotitie

Met border-radius zelf is er geen toegankelijkheidsprobleem, maar extreme afronding op interactieve elementen (pillen, chips) mag het aanraakdoel niet verkleinen. Houd knoppen minstens 44×44px (WCAG-aanbeveling), ongeacht de afronding van de hoeken.

Veelgestelde vragen

Omdat een procentuele border-radius horizontaal wordt gemeten als ‘% van de breedte’ en verticaal als ‘% van de hoogte’, op een niet-vierkant element levert dat een ellips op. Voor een cirkel moet het element vierkant zijn, of gebruik je pixelwaarden die passen bij de afmetingen van het element.

Standaard alleen de achtergrond, rand en box-shadow. Onderliggende elementen worden niet bijgesneden, tenzij je ook overflow: hidden aan het bovenliggende element toevoegt.

Het is animeerbaar tussen numerieke waarden: transition: border-radius 200ms; werkt voor pixels en percentages. Animeren tussen een complexe elliptische verkorte notatie en een eenvoudige straal kan verrassende tussenframes opleveren; test en vereenvoudig de begin- en eindtoestand als het er vreemd uitziet.

De specificatie stelt geen bovengrens, maar browsers begrenzen de effectieve straal tot de helft van de kortste zijde van het element. border-radius: 9999px op een 40px hoge knop levert een pil op, de browser begrenst dit stilletjes tot 20px.

Gerelateerde tools

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Tool beschikbaar in andere talen