CSS obrubi : CSS Borders

Obrub : Border

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;

CSS Box i Web dizajn!

Boja obruba {1, 4} : Border Color {1, 4}

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:

• ime boje (engleski nazivi): npr. green, black, white
• heksadekadska RGB vrijednost: npr. #00FF00, #0000CC...
• RGB kod boje – npr. rgb(128, 128, 128), rgb(0, 0, 255)
• transparent

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;

Stil crte obruba {1, 4} : Border Style {1, 4}

Koristeći svojstvo border-style postavljamo stil crte obruba za sve četiri stranice (gornju, desnu, donju i lijevu).

Obrazac unosa je:

border-style: vrijednost;

• dashed
• dotted
• double
• groove
• hidden
• inset
• none
• outset
• ridge
• solid

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.

Širina obruba {1, 4} : Border Width {1, 4}

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:

• duljina
• thin
• medium
• thick

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.

Gornji obrub : Border Top

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;

Desni obrub : Border Right

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;

Donji obrub : Border Bottom

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;

Lijevi obrub : Border Left

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;