A határ egy gyorsírási tulajdonság a CSS-ben, amely szegély hozzáadására szolgál egy elemhez. Lehetővé teszi a doboz szegélyének megadását. Beállítja a szegély szélességét, stílusát és színét. Ez a CSS-tulajdonság a következő szegélytulajdonságokat tartalmazza:

szegély szélessége:A border-width tulajdonság a keret szélességének beállítására szolgál. Használhatjuk az előre meghatározott értékeket is vékony, közepes, és vastag a szegély szélességének beállításához. Beállítja a szegély vastagságát. Az alapértelmezett értéke közepes .
Ez az ingatlan önmagában nem használható. Mindig más szegélytulajdonságokkal együtt használják, mint például a 'border-style' tulajdonság, hogy először a szegélyt állítsa be; különben nem fog működni.
A szegély szélessége oldalanként eltérő lehet. Megtehető a keret-alsó szélesség, border-top-width, border-right-width , és szegély-bal-szélesség .szegély stílus:Ez a tulajdonság határozza meg a szegély stílusát. Meghatározza, hogy a szegély tömör, pontozott, szaggatott, dupla, barázda vagy a többi lehetséges érték valamelyike. E tulajdonság beállítása nélkül, azaz a szegélystílus beállítása nélkül a többi szegélytulajdonság sem fog működni. A szegély láthatatlan lesz a következő megadása nélkül határos stílusban . Ennek az az oka, hogy ennek a CSS-tulajdonságnak az alapértelmezett értéke egyik sem .
Hasonló határ-szélesség , a szegély stílusa oldalanként eltérő lehet. Ezt a tulajdonságok segítségével lehet megtenni border-bottom-style, border-top-style, border-right-style , és szegély-bal-stílus .keret színe:Lehetővé teszi a szegély színének megváltoztatását. A színt a színnév, az RGB érték vagy a hexadecimális érték használatával állíthatjuk be. Hasonló a határ-szélesség és határos stílusban , egyenként változtathatjuk a szegély színét, azaz módosíthatjuk egy elem szegélyének alsó, felső, bal és jobb oldalának színét. Ezt a tulajdonságok használatával lehet megtenni szegély-alsó-szín, szegély-felső-szín, szegély-jobb-szín , és szegély-bal-szín .
A határ-szín az ingatlan önmagában nem használható. Más szegélytulajdonságokkal együtt kell használni, például a 'border-style' tulajdonsággal a szegély beállításához; különben nem fog működni.

határ kontra körvonal

Bár a szegélyek és a körvonalak nagyon hasonlóak, van néhány különbség a körvonalak és a szegélyek között, amelyek a következők:

• Körvonal használatával nem alkalmazhatunk eltérő körvonalszélességet, stílust és színt egy elem négy oldalára, míg szegélyben egy elem mind a négy oldalára alkalmazhatjuk a megadott értéket.
• A szegély az elem dimenziójának része, míg a körvonal nem része az elem dimenziójának. Ez azt jelenti, hogy nem mindegy, milyen vastag körvonalat viszünk fel az elemre, a méretei nem változnak.

Lássunk egy példát a border tulajdonság megértéséhez.

Példa

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Kimenet

Most van egy másik példa, amelyben mindkettőt használjuk vázlat és határ tulajdonságait.

Példa

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Kimenet