CSS Borders (szegélyek)

A CSS szegélyek (borders) lehetővé teszik, hogy az elemeket vizuálisan elkülönítsük, kiemeljük vagy keretet adjunk nekik. A szegélyek kombinálásával modern, esztétikus és jól tagolt dizájn hozható létre.

Alap szegély beállítások

A <border> tulajdonsággal egyszerre állíthatjuk a szegély vastagságát, stílusát és színét. Példa: <border: 2px solid black;>.

Az alábbi példában egy <div> elemhez 2px vastag fekete, solid szegélyt adunk:

Különböző szegély stílusok

A szegélyek több stílust is kaphatnak: solid, dashed, dotted, double, groove, ridge, inset és outset. Ezekkel változatos megjelenést adhatunk az elemeknek.

Kerekített szegélyek

A <border-radius> tulajdonsággal lekerekíthetjük az elemek sarkait. Használható kis mértékű kerekítéshez vagy teljesen kör alakú elemek létrehozásához is.

Eltérő szegélyek oldalak szerint

Nem kötelező minden oldalra azonos szegélyt beállítani. A <border-top>, <border-right>, <border-bottom> és <border-left> külön szabályozhatók, így akár mind a négy oldal eltérő stílust kaphat.

Tippek a szegélyek használatához

A szegélyek segíthetnek a vizuális hierarchia és a dizájn javításában. Néhány hasznos tipp:

• Válassz kontrasztos szegélyszínt a jobb láthatóság érdekében.
• Kerüld a túl vastag szegélyeket, mert zavarhatják a tartalom olvashatóságát.
• Használd a szegélyeket kreatívan, kombináld más stílusokkal (pl. árnyék, háttérszín), hogy modern megjelenést kapj.