Lohkon reunusten pyöristäminen CSS:llä
Nyt opimme pyöristämään lohkon
kulmia. Tätä varten tulee käyttää
ominaisuutta border-radius, joka ottaa
arvoa pikseleinä.
Mitä tarkoittaa, että olemme määrittäneet pyöristyksen,
esimerkiksi 10px:ksi? Se on ympyrän säde,
joka voidaan kirjoittaa tähän pyöristykseen. Jos
sinulla on vaikeuksia matematiikan kanssa etkä ymmärrä
viimeistä lausetta - unohda se ja
valitse pyöristys silmämääräisesti.
Joillain kokemuksella tämä ei ole ongelma (mittaus
työkalua pyöristysten mittaamiseen ei ole olemassa,
ainakaan en ole sellaisesta kuullut).
Pyöristetään lohkon kulmat antamalla sille
pyöristys 10px:ksi:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Toista sivu tämän esimerkin mukaisesti:
