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:

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px;
}

Результат: