CSS3:n border-radius ominaisuus

Opas

CSS3:n myötä tuli mahdollisuus vaikuttaa elementtien kulmien muotoon. Border-radius ominaisuutta käytetään elementin kulmien pyöristykseen. Vaikka ominaisuuden nimi onkin border-radius, niin elementille ei tarvitse antaa kehystä (border -ominaisuutta), jos näkyvää kehystä ei haluta. Kulman pyöristyksen suuruus voidaan määrittää säteen pituutena kaikille elementin neljälle kulmalle yhtäsuureksi esim. pikseleinä seuraavasti:

border-radius: 10px;

Vaihtoehtoisesti kulman muoto voidaan määrittää suhteellisella määrityksellä, jolloin kulmien muotoon vaikuttaa myös kyseisen elementin leveys ja korkeus.

border-radius 20%;

Jos kaikista kulmista ei haluta samanlaisia, kulmat voidaan määritellä yksittäin kahdella eri tavalla:

Tapa 1: Yhdellä lauseella

järjestyksessä: vasen ylä-, oikea ylä-, oikea ala- ja vasen alakulma. Esim.:

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

Tapa 2: Useammalla lauseella:

Vasen yläkulma:

border-top-left-radius: 12px;

Oikea yläkulma:

border-top-right-radius: 12px;

Oikea alakulma:

border-bottom-right-radius: 12px;

Vasen alakulma:

border-bottom-left-radius: 12px;

Tuki selaimissa

Seuraavat selaimet tukevat border-radius ominaisuutta: