| Tulajdonság | Érték | Leírás |
| border-top-width | thin - vékony medium - közepes thick - vastag length - hossz |
Az elem felső szegélye |
| border-right-width | Az elem jobb oldali szegélye | |
| border-bottom-width | Az elem alsó szegélye | |
| border-left-width | Az elem bal oldali szegélye | |
| border-width | Egy deklaráción belül állítható be az előző négy. |
Mindegyik tulajdonságnál a medium az alapértelmezett. A hossz nem kaphat negatív értéket.
Négy féleképpen adhatjuk meg az értékeket, a lehetőségek: Négy értéke lehet, a következő értelmezésban:
| Érték | Jelentés |
|---|---|
| Egy értéket adunk meg | Mind a négy szegély a megadott értéket kapja |
| Két értéket adunk meg | Az első érték a felső és alsó szegélyre, a második a bal és a jobb szegélyre vonatkozik |
| Három értéket adunk meg | Az első érték a felső, a második a két oldalsó, a harmadik az alsó szegélyre vonatkozik |
| Négy értéket adunk meg | Felső, jobb, alsó és bal oldali szegélyekre vonatkozik, a felsorolás sorrendjében. |
mind a 4 thick lesz
p {border-width: thin thick; border-style:solid}a felső és az alsó keret vékony, a két oldalsó pedig vastag vonal
p {border-width: thin thick medium;border-style:solid }A keretvonalak sorban: fent vékony, balra-jobbra vastag (thick), alul pedig közepes vastagságúak.
p {border-width: thick thin medium thick;border-style:solid }A keretvonalak sorban: fent vastag, jobbra vékony (thin), alul pedig közepes, balra vastag.
p {border-left-width: thick; border-top-width: medium; border-left-style:solid; border-top-style:solid; }A keretvonalak: fent közepes, balra vastag.
| Tulajdonság | Leírás |
| border-top-style | Az elem felső szegélyének stílusa |
| border-right-style | Az elem jobb oldali szegélyének stílusa |
| border-top-style | Az elem alsó szegélyének stílusa |
| border-right-style | Az elem bal oldali szegélyének stílusa |
| border-style | Az elem egysoros stílus beállítása |
| Tulajdonság | Leírás |
| none | Nincs kirajzolt szegély (hiába adsz meg border-width tulajdosághoz értéket). |
| dotted | A szegély pontozott vonallal lesz kirajzolva az elem hátterére. |
| dashed | A szegély szaggatott vonallal lesz kirajzolva az elem hátterére. |
| solid | A szegély folytonos vonallal lesz kirajzolva az elem hátterére. |
| double | A szegély kettős vonallal lesz kirajzolva az elem hátterére. A két vonal összes szélessége és a köztük levő köz megegyezik a border-width értékével. |
| groove | A szegély 3D süllyesztett hatással lesz kirajzolva |
| ridge | A szegély 3D domború hatással lesz kirajzolva |
| inset | A szegély 3D beékelt stílussal lesz kirajzolva |
| outset | A szegély 3D kiemelt hatással lesz kirajzolva |
Az alapértelmezett a none érték, azaz ha nem adunk meg semmit, akkor nem jelenik meg a keret.
mind a 4 keretvonal vastag és pontozott lesz.
p {border-width: thin thick; border-style:dashed}a felső és az alsó keret vékony, a két oldalsó pedig vastag szaggatott vonallal jelenik meg.
p {border-width: thin thick medium;border-style:double }A keretvonalak sorban: fent vékony, balra-jobbra vastag (thick), alul pedig közepes vastagságú dupla vonalak.
Figyeljük meg, hogy a vastagság miatt a fenti dupla vonalat nem tudja kirajzolni. A dupla vonalnak a két vonalvastagsága és a köztük lévő távolság összege kell egyenlő lenni a szélességnél megadott vékony értékkel. Így ezt kerüljük.
| Tulajdonság | Érték | Leírás |
| border-top-color | A hagyományos szín megadási formák: - név - rgb(,,); - #hexa értékekkel |
Az elem felső szegélyének színe |
| border-right-color | Az elem jobb oldali szegélyének színe | |
| border-bottom-color | Az elem alsó szegélyének színe | |
| border-left-color | Az elem bal oldali szegélyének színe | |
| border-color | Egy deklaráción belül állítható be az előző négy szín. |
A border-color tulajdonság a négy szegély színét állítja be. Négy értéke lehet, ahogyan azt a border-width tulajdonságnál már leírtam.
Ha nincs színérték meghatározva, akkor örökli az elem color tulajdonságának az értékét.
mind a 4 keretvonal vastag piros színű lesz.
p {border-width: thin thick; border-style:solid; border-color: red blue gray green;}a felső piros, az alsó keret szürke vékony, a jobb oldalsó kék, vastag vonal. A bal oldali zöld színű vastag vonal.
ugrás a lap tetejére