Svojstvom border možemo postaviti boju, stil i širinu obruba za sve četiri stranice elementa odjednom. Međutim nije obavezno navesti sve vrijednosti.
Primjer unosa obruba:
border: 2px dotted #ff0000;
U gornjem primjeru zamjenili smo odjednim tri svojstva:
border-width: 2px;
border-style: dotted;
border-color: #ff0000;
Koristeći svojstvo border-color postavljamo boju obruba za sve četiri stranice (gornju, desnu, donju i lijevu) postavljanjem jedne do četiri vrijednosti.
Obrazac unosa je:
border-color: vrijednost;
Moguće vrijednosti su:
Primjer unosa četiri boje obruba (gornja crvena, desna žuta, donja plava i lijeva zelena):
border-color: red, yellow, blue, green;
Primjer unosa tri boje obruba (gornja crvena, desna žuta i donja plava). Boja lijevog obruba se uzima od nasuprotne stranice (desne) te ima vrijednost žuta
border-color: red, yellow, blue;
Primjer unosa dvije boje obruba (gornja crvena i desna žuta). Boja lijevog obruba se uzima od nasuprotne stranice (desne) te ima vrijednost žuta, a boja donjeg obruba se uzima od nasuprotne (gornje) i ima vrijednost crvena
border-color: red, yellow;
Ako navedemo samo jednu vrijednost svojstva border-color tada će sva četiri obruba biti iste boje:
border-color: purple;
Koristeći svojstvo border-style postavljamo stil crte obruba za sve četiri stranice (gornju, desnu, donju i lijevu).
Obrazac unosa je:
border-style: vrijednost;
Možemo unijeti jednu do četiri vrijednosti stila crte stranica odvojenih razmakom (najprije gornja, desna, donja i na kraju lijeva stranica). Ako vrijednost jedne (lijeve) ili dvije (donje i lijeve) stranice ne navedemo, vrijednost nenavedene stranice uzet će se od nasuprotnih stranica (lijeva od desne, donja od gornje). Ako unesemo samo jednu vrijednost sve četiri stranice će biti oblikovane crtom istog stila.
Koristeći svojstvo border-width postavljamo širinu crte obruba za sve četiri stranice (gornju, desnu, donju i lijevu).
Obrazac unosa je:
border-width: vrijednost;
Moguće vrijednosti su:
Možemo unijeti jednu do četiri vrijednosti širine obruba stranica odvojenih razmakom (najprije gornja, desna, donja i na kraju lijeva stranica). Ako vrijednost jedne (lijeve) ili dvije (donje i lijeve) stranice ne navedemo, vrijednost nenavedene stranice uzet će se od nasuprotnih stranica (lijeva od desne, donja od gornje). Ako unesemo samo jednu vrijednost sve četiri stranice će imati crtu istu širinu obruba.
Možemo postaviti boju, stil i širinu gornjeg obruba pomoću border-top. Nije obavezno navesti sve vrijednosti.
Primjer unosa vrijednosti gornjeg obruba:
border-top: 1px solid #0000ff;
zamjenjuje pojedinačno postavljanje slijedeća tri svojstva:
border-top-width: 1px;
border-top-style: solid;
border-top-color: #0000ff;
Možemo postaviti boju, stil i širinu desnog obruba pomoću border-right svojstva. Nije obavezno navesti sve vrijednosti.
Primjer unosa vrijednosti desnog obruba:
border-right: 3px double red;
zamjenjuje pojedinačno postavljanje slijedeća tri svojstva:
border-right-width: 3px;
border-right-style: double;
border-right-color: red;
Možemo postaviti boju, stil i širinu donjeg obruba pomoću border-bottom svojstva. Nije obavezno navesti sve vrijednosti.
Primjer unosa donjeg obruba:
border-bottom: 4px solid #00ff00;
zamjenjuje pojedinačno postavljanje slijedeća tri svojstva:
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #00ff00;
Možemo postaviti boju, stil i širinu lijevog obruba pomoću border-left svojstva. Nije obavezno navesti sve vrijednosti.
Primjer unosa obruba:
border-left: 1px solid yellow;
zamjenjuje pojedinačno postavljanje slijedeća tri svojstva:
border-left-width: 1px;
border-left-style: solid;
border-left-color: yellow;