CSS border-radius ominaisuus

Määrittely ja käyttö

border-radius-ominaisuus on lyhennetty ominaisuus, joka asettaa neljä border-*-radius-ominaisuutta.

Vinkki:Tämä ominaisuus mahdollistaa elementin pyöreiden reunojen lisäämisen!

Katso myös:

CSS3-opas:CSS3 reunat

Esimerkki

Lisää pyöreät reunat div-elementille:

div
{
border:2px solid;
border-radius:25px;
}

Kokeile itse

Sivun alaosassa on lisää esimerkkejä.

CSS-kieli

border-radius: 1-4 length|% / 1-4 length|%;

Huomautus:Asetetaan jokaisen säteen neljä arvoa tällä järjestyksellä. Jos alaviistoon jätetään alareuna, se on sama kuin yläoikea. Jos alaviistoon jätetään alareuna, se on sama kuin ylävasen. Jos alaviistoon jätetään yläoikea, se on sama kuin ylävasen.

Ominaisuusarvo

Arvo Kuvaus Testi
length Määritellään kulmien muoto. Testi
% Määritellään kulmien muoto prosentteina. Testi

Esimerkki 1

border-radius:2em;

Vastaa:

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

Esimerkki 2

border-radius: 2em 1em 4em / 0.5em 3em;

Vastaa:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Tekninen yksityiskohta

Oletusarvo: 0
Perintä: ei
Versio: CSS3
JavaScript-kieli: object.style.borderRadius="5px"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen versio, joka tukee tätä ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5