Sådan bruges CSS3 Border Radius Property

Med CSS3 kan du give ethvert element "afrundede hjørner" ved hjælp af border-radiusegenskaben. Værdien kan være i enhver gyldig CSS-længdeenhed.

 .rounded-corners { border-radius: 20px; } .circle { border-radius: 50%; }
eksempler

Bemærk: Denborder-radiusejendom er faktisk en forkortelse egenskab forborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusogborder-bottom-left-radiusegenskaber.

Hvis der kun er angivet en værdi, vil grænseradien være den samme for alle fire hjørner, som i eksemplerne ovenfor. Men du har også mulighed for at angive forskellige værdier for hvert hjørne.

.new-shape { border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ }

Hvis der kun er angivet to værdier, gælder den første værdi i øverste venstre og nederste højre hjørne, og den anden værdi gælder i øverste højre og nederste venstre hjørne.

.leaf-shape { border-radius: 0 50%; }

Hvis der er indstillet tre værdier, gælder den første igen for radius øverst til venstre, den anden værdi angiver øverst til højre og nederst til venstre, hvilket efterlader den tredje værdi for at angive det nederste højre hjørne.

.odd-shape { border-radius: 0 20px 50%; }
eksempler

Afrundingen af ​​et hjørne behøver ikke at være perfekt symmetrisk. Du kan angive både de vandrette og lodrette radier ved hjælp af en skråstreg (”/”) for at opnå et hjørne med en elliptisk form.

.elliptical-1 { border-radius: 50px/10px; /* horizontal radius / vertical radius */ } .elliptical-2 { border-radius: 10px/50px; }
eksempler

Da der kun er angivet et par værdier i ovenstående eksempler, er alle fire hjørner ens. Men selvfølgelig, hvis du vil have en mere kompleks form, kan du give op til fire værdier for de vandrette radier og fire for de lodrette radier.

.elliptical-3 { border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */ }

Læg mærke til, hvordan stenografien ovenfor giver det samme resultat som at specificere individuelle egenskaber nedenfor. Vær opmærksom på, at når hjørner indstilles individuelt, er værdierne plads-adskilt i stedet for skråstreg-adskilt.

.elliptical-4 { border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */ border-top-right-radius: 20px 50px; border-bottom-right-radius: 50px 20px; border-bottom-left-radius: 20px 50px; }
eksempler

Mere info om CSS border radius-ejendom:

  • Lær at bruge CSS border radius-egenskaben ved at oprette en lommeregner