CSS alapok (A CSS alapjainak összefoglalója) című cikk nyitóképe

CSS keretek, szegélyek használata (CSS border)

A CSS border lehetővé teszi, hogy meghatározzuk egy elem keretének (vagy ha úgy tetszik szegélyének) a tulajdonságait. Például a stílusát, szélességét vagy a színét.

A keretek (border) felhasználási területe rendkívül széles, de elsősorban táblázatoknál szokták felhasználni. Továbbá szövegkiemelésre nagyon jó még a szegély, mert egy bekeretezett szövegre könnyebben felfigyel az ember. Sokan képekre szoktak még keretet rakni, mert ez egy kicsit elkülöníti a képet a tartalomtól. Ezeken felül is rengeteg módon lehet még felhasználni a szegélyeket.

CSS keret, szegély szintaktikája

border: MÉRET STÍLUS SZÍN;
Code language: HTTP (http)

A méretet pixelben kell megadni. A színt megadhatjuk névvel, RGB kóddal, hexadecimálisan vagy akár egyéb módon is. A stílus több értéket vehet fel, amelyek az alábbiak lehetnek:

dotted – pontozott vonal
dashed – szaggatott vonal
solid – folytonos vonal
double – dupla vonal
groove – 3D-s vonal
ridge – 3D-s vonal
inset – 3D-s vonal
outset – 3D-s vonal
none – nincs keret, szegély
hidden – rejtett keret, szegély

Ezeket az értékeket akár „border-style” tulajdonságként is használhatjuk.

Példa keret, szegély (border) használatára

CSS kód

<p style="border: 1px dotted black;">pontozott vonal</p>
<p style="border: 1px dashed black;">szaggatott vonal</p>
<p style="border: 1px solid black;">folytonos vonal</p>
Code language: HTML, XML (xml)