CSS3 szegélyek

A szegély stílusa a border-style tulajdonság segítségével állítható be.

A szegély stílusa oldalanként eltérő lehet.

Egyetlen stílusdeklarációban is lehetőségünk nyílik valamennyi oldalhoz külön stílust rendelni, ha a 4 értéket szóközzel elválasztva felsoroljuk.

A szegélyek színét a border-color tulajdonság segítségével állíthatjuk be.

A szegély színe egy HTML elem mind a négy oldalán eltérő lehet.

Egyetlen stílusdeklarációban is lehetőségünk nyílik valamennyi oldalhoz külön színt rendelni, ha a 4 színt szóközzel elválasztva felsoroljuk.

A szegélyek szélességét a border-width tulajdonság segítségével állíthatjuk be.

A szegélyek szélességét mind a 4 oldalra külön-külön is beállíthatjuk.

A szegély szélessége beállítható a HTML elem mind a négy oldalán egy stílusdeklarációval.

Minden oldalra összevontan is megadhatók a szegélyek jellemzői.

Minden oldalra összevontan is megadhatók a szegélyek jellemzői.

A szegélyek sarkai a border-radius tulajdonság segítségével lekerekíthető. Paraméterként a szegély külső szélének sugarát kell megadni.

Ha egy négyzet esetén a kerekítés sugarát százalékban adjuk meg, akkor a 100% megegyezik a négyzet egy oldalának hosszával. 50% beállítása esetén kör alakú lesz a szegély.

A szegélyek lekerekítésének mértéke sarkonként is megadhatóak.

A bal felső saroktól, az óramutató járásával egyező irányba haladva adhatjuk megy egymás után az egyes sarkok sugarát.

Már a százalékos értékadás esetén is, ha az elem magassága vagy szélessége különbözött, akkor két különböző sugár által meghatározott ellipszisek alkották a sarkokat.

A sarkok sugarainak beállítása (vízszintes/függőleges)

A szegélyek segítségével lehetőség nyílik szabályos és szabálytalan geometriai alakzatok készítésére csupán css stílusdeklarációk felhasználásával.

A szövegekhez hasonlóan a dobozokhoz is rendelhetünk egy vagy több árnyékot.

Vesszővel elválasztva több árnyék jellemzői is megadhatók.

A szegélyek egy-egy kép felhasználásával is megvalósíthatók.