A border-top, border-bottom, border-right, border-left és a border tulajdonságok

Ezek a tulajdonságok a keret három paraméterének együttes megadására szolgálnak. A border-top a felső, a border-right a jobboldali, a border-bottom az alsó, a border-left a baloldali keret megadására, míg a border mind a négy oldal egyidejű megadására szolgál. Ez utóbbi esetben egy érték adható meg egyszerre mindegyik oldalra.

Az első négy – az oldalakat külön-külön megadó – tulajdonság értékeit a következőképpen kell megadni:

  1. A keret szélessége, ahogyan az ehhez tartozó tulajdonságnál szokás
  2. A keret stílusa, ahogyan az ehhez tartozó tulajdonságoknál szokás
  3. A keret színe, a keretszínt definiáló tulajdonságok mintájára

Ha ezek helyett mindösszesen egy inherit szót adunk meg, akkor az elemet tartalmazó elemnek a keretre vonatkozó tulajdonságait örökli a megadott tulajdonság.

Íme egy példa, ahol a keret vastag, folyamatos, vörös vonalú lesz, vagyis ilyen vonal lesz a cím alatt:

H1 { border-bottom: thick solid red}

Ha nem adjuk meg mindhárom tulajdonság értékét, akkor a hiányzó az alapértelmezett értéket kapja. Így a következő példában, ahol a szín megadása nem szerepel, a keret színe az elem color tulajdonsága által megadott színű lesz:

H1 { border-bottom: thick solid}

A border tulajdonság ugyanígy kapja az értékeket, azonban az egyszerre lesz érvényes minden oldali keretre. Ez eltér a külső és a belső margó, valamint a keretvastagság, a keretstílus és a keretszín megadásánál alkalmazható rövidítéstől, ahol fel lehetett sorolni az egyes oldalak adatait. Ez a tulajdonság ezzel szemben akkor alkalmazható, ha mind a négy oldalon egyforma beállítást akarunk alkalmazni.

Másrészt akkor is alkalmazható, ha csak az egyik oldal valamelyik tulajdonsága fog eltérni a többitől: Először állítsuk be minden oldalt egyformára a border tulajdonsággal, majd ezt követően az eltérő tulajdonságot adjuk meg külön, amely így felülbírálja a minden oldalra vonatkozó beállítást.

A következő példában két szabály található, amelyek mindketten egyforma jelentéssel bírnak: folyamatos, piros színű vonalat állítanak be keretnek mind a négy oldalon:

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

A tulajdonságok megadásának sorrendje nagyon fontos lehet. Erre példa a következő szabály:

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black }

Itt az első tulajdonság beállítja a keret színét pirosra. Azonban a következő szabály a baloldali keret valamennyi tulajdonságát állítja, és mivel a fentebb leírtak értelmében, ha valamelyik érték hiányzik, akkor az az alapértelmezést kapja, így a hiányzó keretszín miatt a baloldali keret színe a color tulajdonság értékét fogja kapni, amely a harmadik tulajdonságban feketére lett állítva. Így tehát a baloldalon a keret fekete lesz.

Amennyiben szeretnénk minden oldalt pirosan látni, akkor vagy meg kell adni a border-left tulajdonságnál is a színt, vagy az első két tulajdnoságot fel kell cserélni.