Softonic

CSS border-radius-generator

Steg 1 / 2 Generera CSS
Resultat

border-radius verkar enkelt, tills du försöker förklara varför 50% på en kvadrat ger en cirkel medan 50% på en rektangel ger en oval. Med den här generatorn anger du ett värde för vart och ett av de fyra hörnen, väljer mellan px, % och rem och kopierar exakt den kortform den skapar. Användbar för knappformer, korthörn, pillerformade knappar (pill) och asymmetriska hörn.

Så bygger du en border-radius

  1. 1

    Ställ in varje hörn

    Ange en radie för hörnen uppe vänster, uppe höger, nere höger och nere vänster.

  2. 2

    Välj enhet

    Pixlar (fast storlek), procent (relativt elementet) eller rem (relativt rotens teckenstorlek).

  3. 3

    Generera CSS

    Tryck på Generate CSS för att skapa kortformen.

  4. 4

    Kopiera regeln

    Kopiera `border-radius`-kortformen och klistra in den i din stilmall.

Ordningen i kortformen

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

Samma som margin / padding: medurs med start uppe till vänster. Utelämnade värden speglar motstående hörn. Så border-radius: 10px 20px; betyder 10px uppe vänster och nere höger, och 20px uppe höger och nere vänster.

Vad den här generatorn inte gör

Den anger en radie per hörn, så den skapar aldrig elliptiska hörn (tvåvärdesformen med snedstreck, till exempel border-radius: 20px 10px / 5px 15px;) eller utskrivna egenskaper som border-top-left-radius. Behöver du sådana får du skriva CSS för hand.

Procent kontra pixlar

Enhet Beteende
px Fast, skalar inte med elementets storlek
% Procent av elementets bredd (horisontellt) och höjd (vertikalt)
em Skalar med elementets teckenstorlek
rem Skalar med rotens teckenstorlek

50% på ett kvadratiskt element = cirkel. På en rektangel 200×100 ger 50% en horisontell radie på 100px plus en vertikal på 50px = ellips.

Vanliga former

Form CSS
Cirkel (kvadrat) border-radius: 50%;
Piller (pill) border-radius: 9999px; (valfritt värde ≥ halva höjden)
Rundat kort border-radius: 8px; eller 12px
Chattbubbla border-radius: 18px 18px 0 18px; (svans nere till höger)
Subtil border-radius: 2px; eller 4px

Regeln “halva höjden” för pillerknappar

En pillerknapp (pill) är en rektangel där vänster och höger kant är perfekta halvcirklar. För att uppnå det på ett tillförlitligt sätt ställer du in border-radius på minst halva elementets höjd. Att använda 9999px (eller något mycket stort värde) är säkert, eftersom webbläsaren begränsar radien till den faktiska geometrin.

Samspel med overflow

Som standard klipper border-radius bara bakgrund, kantlinje och box-shadow. För att klippa underordnade element (bilder, nästlade element) till den rundade formen lägger du till:

overflow: hidden;

eller använder isolation: isolate + overflow: hidden för att även innesluta staplingskontexter (stacking contexts).

Notering om tillgänglighet

border-radius i sig innebär inget tillgänglighetsproblem, men extrem rundning på interaktiva element (piller, chips) får inte krympa tryckytan. Behåll knappar på minst 44×44px (WCAG-rekommendation) oavsett hörnrundning.

Vanliga frågor

Eftersom procentuell border-radius mäts som “% av bredden” horisontellt och “% av höjden” vertikalt, på ett icke-kvadratiskt element blir det en ellips. För en cirkel måste elementet vara kvadratiskt, eller så använder du pixelvärden som matchar elementets dimensioner.

Som standard bara bakgrund, kantlinje och box-shadow. Underordnade element klipps inte om du inte även lägger till overflow: hidden på det överordnade elementet.

Den går att animera mellan numeriska värden: transition: border-radius 200ms; fungerar för både pixlar och procent. Att animera mellan en komplex elliptisk kortform och en enkel radie kan ge oväntade mellanbilder; testa och förenkla start- och sluttillståndet om det ser konstigt ut.

Specifikationen anger ingen övre gräns, men webbläsare begränsar den effektiva radien till halva elementets kortaste sida. border-radius: 9999px på en 40px hög knapp ger ett piller, webbläsaren begränsar tyst till 20px.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk