Border Radius-generator

Rund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.

Forhåndsinnstillinger
Hjørner
Alle hjørner
24px
CSS
Dra i glidebryterne for å runde av hjørnene.

Hvert hjørne tegnes direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hvordan fungerer de fire hjørnene og px vs. %?

De fire glidebryterne tilsvarer, med klokken, hjørnene oppe til venstre, oppe til høyre, nede til høyre og nede til venstre. I piksler rundes et hjørne av med en fast verdi; i prosent rundes det av i forhold til boksen — en horisontal prosent følger bredden og en vertikal prosent følger høyden, slik at 50% gjør et kvadrat til en sirkel.

Hva gjør elliptisk modus?

Når den er av, er hvert hjørne en kvart sirkel med én enkelt radius. Slår du den på, får hvert hjørne en separat horisontal og vertikal radius, som er slik du bygger myke, organiske «klatt»-former (blobs). Generatoren skriver skråstrek-syntaksen med to verdier for deg, og går tilbake til den korte formen så snart hjørnene er runde igjen.

Hvordan lager jeg en perfekt sirkel eller en pilleform?

Koble sammen hjørnene, bytt til prosent og sett verdien til 50%: da blir et kvadrat til en sirkel. For en pilleformet knapp beholder du piksler i stedet, og drar et hjørne forbi halvparten av knappens høyde — da forblir sidene helt avrundede uansett bredde. Forhåndsinnstillingen «Sirkel» setter opp det første tilfellet med ett klikk.

Skrevet og gjennomgått av BroBroGo-redaksjonen.Sist oppdatert:

CSS-egenskapen border-radius og hvordan den fungerer

Egenskapen border-radius i CSS brukes til å runde av hjørnene på et HTML-element. Ved å justere denne verdien endrer du formen på boksens ytre grenser, noe som påvirker både bakgrunnsfarger, rammer og innhold som klippes til rammegrensen.

Verktøyet Border Radius-generator lar deg manipulere disse verdiene visuelt. De fire glidebryterne i grensesnittet kartlegger hjørnene med klokken, med start øverst til venstre:

  1. Oppe til venstre
  2. Oppe til høyre
  3. Nede til høyre
  4. Nede til venstre

Når du bruker verktøyet, tegnes hvert hjørne direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo. Dette sikrer at behandlingen av dine designparametere forblir lokal.

Forskjellen mellom piksler (px) og prosent (%)

Valget av måleenhet har stor betydning for hvordan avrundingen oppfører seg når elementets størrelse endres. Verktøyet lar deg velge mellom enhetene "px" og "%" via en egen enhetsvelger.

Avrunding med piksler (px)

Når du bruker piksler, rundes hjørnet av med en fast, absolutt verdi. Hvis du for eksempel setter verdien til 24, som er verktøyets startverdi, genereres koden border-radius: 24px;. Denne avrundingen forblir nøyaktig 24 piksler stor, uavhengig av om selve boksen er 100 piksler eller 1000 piksler bred.

Avrunding med prosent (%)

Når du velger prosent, blir avrundingen relativ til boksens faktiske dimensjoner. En horisontal prosentverdi følger bredden på boksen, mens en vertikal prosentverdi følger høyden. Dette betyr at hvis du har et rektangulært element, vil en prosentvis avrunding strekke seg og bli asymmetrisk fordi bredden og høyden på elementet er forskjellige. Hvis elementet er et perfekt kvadrat, vil en verdi på 50% gjøre kvadratet om til en perfekt sirkel.

Enkle og elliptiske hjørner

I standardmodus er hvert avrundede hjørne en kvart sirkel. Det betyr at den horisontale og den vertikale radiusen for hjørnet er identiske, og defineres av én enkelt verdi.

Når du aktiverer funksjonen for elliptiske hjørner, går verktøyet over i en modus der hvert hjørne får en separat horisontal og vertikal radius. Dette gir deg to glidebrytere per hjørne:

  • Horisontal
  • Vertikal

Dette gjør det mulig å lage asymmetriske, myke og organiske former. I CSS representeres dette ved at de horisontale og vertikale verdiene skilles med en skråstrek (/). Generatoren skriver denne skråstrek-syntaksen automatisk når elliptisk modus er aktiv, og faller tilbake til den korte formen uten skråstrek så snart hjørnene gjøres runde igjen.

Slik lager du sirkler, piller og organiske former

Ved å kombinere innstillingene for kobling, enheter og elliptisk modus, kan du oppnå spesifikke geometriske figurer:

  • Perfekt sirkel: For å lage en sirkel må utgangspunktet være et kvadratisk element. Koble sammen alle hjørner, bytt enhet til "%", og sett glidebryteren til 50%.
  • Pilleformet knapp: Hvis du skal designe en avlang knapp med helt avrundede kortsider, beholder du enheten "px". Dra glidebryteren forbi halvparten av knappens høyde. Sidene vil da forbli maksimalt avrundet som en halvsirkel, uansett hvor bred knappen gjøres i koden.
  • Organiske former (blobs): Aktiver elliptiske hjørner og koble fra hjørnene slik at du kan justere de åtte verdiene uavhengig av hverandre. Ved å sette ulike horisontale og vertikale verdier på de fire hjørnene, oppstår asymmetriske, flytende former.

Bruk av forhåndsinnstillinger

For å forenkle designprosessen inneholder verktøyet fem raske forhåndsinnstillinger under overskriften "Forhåndsinnstillinger":

Knapp Effekt på hjørnene Typisk bruksområde
Skarp Setter alle hjørner til 0. Standard firkantede bokser uten avrunding.
Avrundet Setter en moderat avrunding på hjørnene. Standard knapper, kort og grensesnittelementer.
Sirkel Setter alle hjørner til 50%. Profilbilder og sirkulære ikoner.
Klatt Aktiverer elliptiske hjørner med asymmetriske verdier. Dekorative bakgrunnsformer og moderne grafiske elementer.
Blad Setter diagonale hjørner til høye verdier og de andre til 0. Bladformede ikoner og utradisjonelle bildebeholdere.

Når du har funnet den ønskede formen, kan du klikke på knappen "Kopier CSS" for å kopiere den ferdige koden direkte til utklippstavlen, klar til å limes inn i stilarket ditt.

Ofte stilte spørsmål

Hvordan fungerer de fire hjørnene og px vs. %?

De fire glidebryterne tilsvarer, med klokken, hjørnene oppe til venstre, oppe til høyre, nede til høyre og nede til venstre. I piksler rundes et hjørne av med en fast verdi; i prosent rundes det av i forhold til boksen — en horisontal prosent følger bredden og en vertikal prosent følger høyden, slik at 50% gjør et kvadrat til en sirkel.

Hva gjør elliptisk modus?

Når den er av, er hvert hjørne en kvart sirkel med én enkelt radius. Slår du den på, får hvert hjørne en separat horisontal og vertikal radius, som er slik du bygger myke, organiske «klatt»-former (blobs). Generatoren skriver skråstrek-syntaksen med to verdier for deg, og går tilbake til den korte formen så snart hjørnene er runde igjen.

Hvordan lager jeg en perfekt sirkel eller en pilleform?

Koble sammen hjørnene, bytt til prosent og sett verdien til 50%: da blir et kvadrat til en sirkel. For en pilleformet knapp beholder du piksler i stedet, og drar et hjørne forbi halvparten av knappens høyde — da forblir sidene helt avrundede uansett bredde. Forhåndsinnstillingen «Sirkel» setter opp det første tilfellet med ett klikk.

CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt og resten oppdateres fortløpende.