Az új böngésző verziók már olyan különleges CSS tulajdonságokat is megtudnak jeleníteni, mint a különböző HTML elemek lekerekítése, vagy a színátmenetek megjelenítése. Ezek látványos elemek, amelyek egyedi megjelenést adnak a weboldalnak.

Alkalmazható képeknél, szövegdobozoknál, táblázatnál, és akár szöveg háttér elemeknél.

Először a lekerekítést mutatom be, amely a border-radius tulajdonság.


border-radius CSS kódja

border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 3px solid #000000;
background-color: #940000;

Ennél a kódnál a terület mind a négy sarkának az értékét külön-külön meg tudjuk adni. Így akár eltérő vagy ellentétes formákat (ovális, ellipszis) is létre lehet hozni.

Ha mind a négy sarkot egyforma méretűre szeretnénk beállítani, akkor egyszerűbb, ha egy értékkel adjuk meg a lekerekítés értékét.

A rövidebb css kód

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

 

Kör rajzolása CSS kóddal

css körKört is tudunk rajzolni az alábbi módon:

border-radius: 225px 225px 225px 225px;
-moz-border-radius: 225px 225px 225px 225px;
-webkit-border-radius: 225px 225px 225px 225px;