Du kan gi ethvert element "avrundede hjørner" ved å bruke en border-radiusgjennom CSS. Du vil bare merke hvis det er en fargeendring involvert. For eksempel, hvis elementet har en bakgrunnsfarge eller kant som er forskjellig fra elementet det er over. Enkle eksempler:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Det er egentlig ikke nødvendig lenger, men for absolutt best mulig nettleserstøtte kan du prefikse med -webkit-og -moz-:
.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )Legg merke til rekkefølgen på disse egenskapene: leverandørens prefiks er først oppført, og den ikke-prefikset "spesifikke" versjonen er sist oppført. Dette er den riktige måten å gjøre det på. Grenseradius er et spesielt godt eksempel på hvorfor vi gjør det på den måten. I litt mer komplisert versjon av bruk border-radius(der du overfører to verdier i stedet for en), vil det eldre -webkit-leverandørprefikset gjøre noe helt annet enn "spesifikke" versjonen. Så hvis vi blindt kopierer / limer inn de samme verdiene til alle de tre egenskapene, kan vi se forskjellige resultater på tvers av nettleseren. Lær mer om dette scenariet. For å få mest mulig konsistens på lang sikt, er det best å liste "spesifikke" versjonen sist.
Det er ganske realistisk i disse dager å slippe prefikser og bare bruke border-radius, som diskutert her.
Hvis elementet har en bakgrunnsbilde, blir det naturlig klippet i det avrundede hjørnet:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Noen ganger kan du se en background-color"lekkasje" utenfor en grense når den border-radiuser til stede. (se). For å forhindre dette bruker du bakgrunnsklipp:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Med bare én verdi, border-radiusvil det være det samme på alle fire hjørner av et element. Men det trenger ikke være tilfelle. Du kan spesifisere hvert hjørne separat hvis du ønsker det:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Du kan også spesifisere to eller tre verdier. MDN forklarer det godt:
Hvis en verdi er satt, gjelder denne radiusen for alle 4 hjørnene .
Hvis det er angitt to verdier, gjelder den førstetop-left og bottom-righthjørne, den andre gjelder top-rightog bottom-lefthjørne.
Fire verdier gjelder for top-left, top-right, bottom-right, bottom-lefthjørne i den rekkefølgen.
Tre verdier: Den andre verdien gjelder top-rightog også bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Du kan også spesifisere radiene der hjørnet avrundes. Avrundingen trenger med andre ord ikke å være perfekt sirkulær, den kan være elliptisk. Dette gjøres ved å bruke en skråstrek (“/”) mellom to verdier.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Merk: Firefox støttet bare elliptiske grenser i 3.5+ og eldre WebKit-nettlesere (f.eks. Safari 4) behandler “40px 10px” feil som det samme som “40px / 10px”.
Du kan spesifisere verdien av border-radiusi prosent. Dette er spesielt nyttig når du vil lage en sirkel eller en form, men kan brukes når du vil at kantradiusen skal være direkte korrelert med elementets bredde.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Merk: I Safari støttes prosentverdier for grenseradius bare i 5.1+. I Opera støttes bare i 11.5+.
Her er hver enkelt eiendom, med leverandørprefikser:
.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )Merk: Hver av disse verdiene kan også ha en romskilt verdi, som "5px 10px", som oppfører seg som en skråstrek-delt verdi i stenografi (horisontal radius (mellomrom) vertikal radius).
Ressurser
- Raskt verktøy for å generere kantradiuskode
- Mozilla Docs
- På jakt etter den perfekte radiusen
- Trenger vi å prefikse grense-radius lenger?
Her er en liten ting å leke med de forskjellige egenskapene og verdiene:
Se Pen All the border-radius 'av Chris Coyier (@chriscoyier) på CodePen.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3,1 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |