Dobozok sarkainak lekerekítése

Egy szintén nagyszerű dizájnelem a CSS 3-ban lévő border-radius, amivel a dobozok sarkait le tudjuk kerekíteni, sőt akár ovális formájú is lehet.

Tartalom

Sarkok lekerekítése - border-radius

A border-radius tulajdonsággal lekerekíthető a dobozok sarka, mind a 4 sarkot külön-külön be lehet állítani, így sokféle formát létre lehet hozni, lehet kerek, ovális, ellipszis alakú is.

Példa a kódra:

CSS

div {
border: 1px solid #FF6611;
background-color: #BBBBBB;
border-radius: 10px 10px 10px 10px/* CSS by srmark */;
-moz-border-radius: 10px 10px 10px 10px/* CSS by srmark */;
-webkit-border-radius: 10px 10px 10px 10px/* CSS by srmark */;
}

teszt doboz

Elemezzük a fenti kódot:
A lekerekítés csak úgy fog látszódni természetesen ha a doboznak van kerete, vagy háttere, ezek nélkül nem látszódna semmi, ez van az első két sorban.
A következő 3 sor a border-radius lekerekítő kód, és azért 3 soros mert a kód a cikk írásának időpontjában még nem szabványos, de a böngészők már használják:
Az első, a sima border-radius a szabványos kód, a böngészők egységesen ezt fogják használni, viszont most csak a legújabb Chrome, és a többi böngésző legújabb béta verzióiban működik.
A második, a -moz- előtagos kód csak a mozilla termékekben működik, tehát pl firefoxban.
A harmadik, a -webkit- előtagos kód csak a webkit alapú böngészőkben működik, pl chrome és safari.
Mivel a fenti kódban ugyanazok az értékek vannak, ezért ugyanazt a kinézetet fogják megjeleníteni.

A kód ezen formájában 4 értéket kell megadi, azt hogy a kiválasztott elem/doboz 4 sarka hány pixelel legyen lekerekítve, az első érték a doboz bal felső sarka, a második a jobb felső sarka, a harmadik a jobb alsó, és a negyedik a bal alsó sarka a doboznak.
Ezeket külön-külön beállíthatjuk mind a négy sarokra.

CSS

div {
border: 1px solid #FF6611;
background-color: #BBBBBB;
border-radius: 10px/* CSS by srmark */;
-moz-border-radius: 10px/* CSS by srmark */;
-webkit-border-radius: 10px/* CSS by srmark */;
}

teszt doboz

Ha csak egyetlen értéket adunk meg akkor is helyes lesz a kód, ekkor mind a négy sarok kerekítését erre az értékre fogja beállítani, ez látszik a fenti két példa kódon is.


A kódnak létezik egy 4 soros változata is ahol minden sarokra külön attribútum vonatkozik, viszont itt vigyázni kell arra hogy a böngészők különböző attribútumokat használnak:

CSS

div {
border: 1px solid #FF6611;
min-height: 50px;
background-color: #BBBBBB;

border-top-left-radius: 10px/* CSS by srmark */;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

-moz-border-radius-topleft: 10px/* CSS by srmark */;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;

-webkit-border-top-left-radius: 10px/* CSS by srmark */;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}

teszt doboz

Ebben a kódban sorrendben ugyanazokat a sarkokat módosítja mint a fenti kódok, ami a színezés, és az attribútumok nevéből is látszik.


Ha azt akarod hogy ne szabályos kör formájú legyen a doboz sarka hanem ovális akkor használd ezt a kódot:

CSS

div {
border: 1px solid #FF6611;
min-height: 50px;
background-color: #BBBBBB;
border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px/* CSS by srmark */;
-moz-border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px/* CSS by srmark */;
-webkit-border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px/* CSS by srmark */;
}

teszt doboz

Ennél a kódnál minden sarokhoz két darab érték tartozik, tehát például a bal felső sarokhoz a legelső, és a perjel utáni első érték tartozik, ha ezt a két értéket egyformára állítjuk akkor kerek lesz a doboz sarka, ha valamelyiket nagyobbra akkor ovális formát kapunk attól függően mekkorák az értékek. A többi érték sorrendben és színek szerint is ugyanaz mint a sima kerekítéses példában.

Példák:

border-radius: 0px 0px 0px 100px;
-moz-border-radius: 0px 0px 0px 100px;
-webkit-border-radius: 0px 0px 0px 100px;

border-radius: 100px 0px 100px 0px;
-moz-border-radius: 100px 0px 100px 0px;
-webkit-border-radius: 100px 0px 100px 0px;

border-radius: 100px 100px 10px 10px / 30px 30px 50px 50px;
-moz-border-radius: 100px 100px 10px 10px / 30px 30px 50px 50px;
-webkit-border-radius: 100px 100px 10px 10px / 30px 30px 50px 50px;

border-radius: 80px 30px 80px 30px / 30px 80px 30px 80px;
-moz-border-radius: 80px 30px 80px 30px / 30px 80px 30px 80px;
-webkit-border-radius: 80px 30px 80px 30px / 30px 80px 30px 80px;

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

border-radius: 350px 350px 350px 350px / 200px 200px 200px 200px;
-moz-border-radius: 350px 350px 350px 350px / 200px 200px 200px 200px;
-webkit-border-radius: 350px 350px 350px 350px / 200px 200px 200px 200px;