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.

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)

Eredmény

pontozott vonal

szaggatott vonal

folytonos vonal

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!