CSS Borders

undo redo

Šta određuje Borders?

Borders određuje granice oko HTML elemenata. (engl. Border = granica).

Svi HTML elemetni zauzimaju određeni prostor, koji ograničava HTML element od okoline.

Ukoliko želimo da oko elementa postavimo jasno vidljivu granicu, koristimo parametar border.

Ovo je rečenica sa punom granicom.

Ovo je rečenica koja ima granicu sa tačkicama plave boje.

Ova rečenica ima različite postavke granice sa svih strana.

Ovo je rečenica sa samo donjom granicom.

Ovo je rečenica sa zaobljenom granicom.

Pomoću različitih parametara možemo dobiti različite vrste i oblike granica.

Parametar border može definisati stil, širinu i boju granica:

border-style određuje stil granice

border-width određuje debljinu granice

border-color određuje boju granice

border-style

border-style određuje vrstu granice koja će biti prikazana.

Kakva će granica biti zavisi od vrijednosti parametra.

Vrijednosti parametra mogu biti sljedeće:

solid Definiše punu granicu

double Definiše punu dvostruku granicu

dotted Definiše granicu sa tačkicama

dashed Definiše granicu sa crticama

groove Definiše ugraviranu granicu

ridge Definiše izbočenu granicu

inset Definiše granicu sa uvučenim sadržajem

outset Definiše granicu sa izbočenim sadržajem

none nema granice

hidden granica je sakrivena (zauzima prostor oko elementa)

mix Više različitih granica na jednom elementu

CSS

p.solid    { border-style: solid; }
p.double    { border-style: double; }
p.dotted    { border-style: dotted; }
p.dashed    { border-style: dashed; }
p.groove    { border-style: groove; }
p.ridge    { border-style: ridge; }
p.inset    { border-style: inset; }
p.outset    { border-style: outset; }
p.none    { border-style: none; }
p.hidden    { border-style: hidden; }
p.mix    { border-style: dotted solid dashed solid; }

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

<style>
 p.solid    { border-style: solid; }
 p.double    { border-style: double; }
 p.dotted    { border-style: dotted; }
 p.dashed    { border-style: dashed; }
 p.groove    { border-style: groove; }
 p.ridge    { border-style: ridge; }
 p.inset    { border-style: inset; }
 p.outset    { border-style: outset; }
 p.none    { border-style: none; }
 p.hidden    { border-style: hidden; }
 p.mix    { border-style: dotted solid dashed solid; }
</style>

</head>
<body>

 <p class="solid">Ovo je rečenica sa punom granicom.</p>
 <p class="double">Ovo je rečenica sa dvostrukom  granicom.</p>
 <p class="dotted">Ovo je rečenica koja ima granicu sa tačkicama.</p>
 <p class="dashed">Ovo je rečenica koja ima granicu sa crticama.</p>
 <p class="groove">Ovo je rečenica sa izrezbarenom granicom.</p>
 <p class="ridge">vo je rečenica sa izbočenom granicom.</p>
 <p class="inset">Ovo je rečenica sa uvučenim sadržajem.</p>
 <p class="outset">vo je rečenica sa izbočenim sadržajem.</p>
 <p class="none">Ovo je rečenica bez granice.</p>
 <p class="hidden">Ovo je rečenica sa skrivenom granicom.</p>
 <p class="mix">Ovo je rečenica sa mješovitim granicama.</p>

</body>
</html>

REZULTAT

Ovo je rečenica sa punom granicom.

Ovo je rečenica sa dvostrukom granicom.

Ovo je rečenica koja ima granicu sa tačkicama.

Ovo je rečenica koja ima granicu sa crticama.

Ovo je rečenica sa izrezbarenom granicom.

Ovo je rečenica sa izbočenom granicom.

Ovo je rečenica sa uvučenim sadržajem.

Ovo je rečenica sa izbočenim sadržajem.

Ovo je rečenica bez granice.

Ovo je rečenica sa skrivenom granicom.

Ovo je rečenica sa mješovitim granicama.

border-width

border-width određuje debljinu granice koja će biti prikazana.

Debljina može biti definisana sa predefinisanim imenom (thin, medium, thick) ili sa vrijednostima u px, cm, em .

Border-width se uvijek piše zajedno sa border-style, inače se neće primjeniti na element.

CSS

p.petpx {
   border-style: solid;
   border-width: 5px;
}

p.medium {
   border-style: solid;
   border-width: medium;
}

p.thin {
   border-style: solid;
   border-width: thin;
}

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

<style>
p.petpx {
border-style: solid;
border-width: 5px;
}

p.medium {
border-style: solid;
border-width: medium;
}

p.thin {
border-style: solid;
border-width: thin;
}

</style>

</head>
<body>


 <p class="petpx">Ovo je rečenica sa punom granicom i debljinom od 5 pixela.</p>
 <p class="medium">Ovo je rečenica sa punom granicom i debljinom medium.</p>
 <p class="thin">Ovo je rečenica sa punom granicom i debljinom thin.</p>

</body>
</html>

REZULTAT

Ovo je rečenica sa punom granicom i debljinom od 5 pixela.

Ovo je rečenica sa punom granicom i debljinom medium.

Ovo je rečenica sa punom granicom i debljinom thin.

border-color

border-color definiše boju granice.

Boju možemo definisati bilo kojom metodom, imenom boje. ili RGB, HEX ili HSL vrijednostima.

CSS

p.solid-tomato {
   border-style: solid;
   border-color: tomato;
}

p.dotted-rouse {
   border-style: dotted;
   border-color: #ff00ff;
}

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

<style>

p.solid-tomato {
  border-style: solid;
  border-color: tomato;
}

p.dotted-rouse {
  border-style: dotted;
  border-color: #ff00ff;
}

</style>

</head>
<body>


 <p class="solid-tomato">Ovo je rečenica sa punom granicom i tomato bojom.</p>
 <p class="dotted-rouse">Ovo je rečenica sa tačkastom granicom i #ff00ff bojom.</p>

</body>
</html>

REZULTAT

Ovo je rečenica sa punom granicom i tomato bojom.

Ovo je rečenica sa tačkastom granicom i #ff00ff bojom.

Pojednostavljeno određivanje granica:

Vidjeli smo da postoje razni parametri pomoću kojih možemo odrediti izgled granice elemenata.

Međutim postoji i jednostavniji način za određivanje granica gdje možemo odjednom postaviti sve parametre.

To možemo učiniti na sljedeći način:

border: width style color;

CSS

p {
border: 2px solid #ff00ff;
}

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

<style>

p {
 border: 2px solid #ff00ff;
}

</style>

</head>
<body>


<p>Ovo je rečenica debljine 2px, stila solid i boje #ff00ff.</p>

</body>
</html>

REZULTAT

Ovo je rečenica debljine 2px, stila solid i boje #ff00ff.

Određivanje pojedinačnih granica:

Ukoliko želimo postaviti granicu samo sa jedne strane to možemo učiniti tako što koristimo sljedeće parametre:

border-left - određuje samo lijevu granicu

border-right - određuje samo desnu granicu

border-top - određuje samo gornju granicu

border-bottom - određuje samo donju granicu

CSS

p.left { border-left: 3px solid green; }
p.right { border-right: 3px solid green; }
p.top { border-top: 3px solid green; }
p.bottom { border-bottom: 3px solid green; }

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

<style>

p.left {
 border-left: 3px solid green;
 background-color: #eee;
}

p.right {
 border-right: 3px solid green;
 background-color: #eee;
}

p.top {
 border-top: 3px solid green;
 background-color: #eee;
}

p.bottom {
 border-bottom: 3px solid green;
 background-color: #eee;
}

</style>

</head>
<body>


<p class="left">Ovo je rečenica koja ima samo lijevu granicu.</p>
<p class="right">Ovo je rečenica koja ima samo desnu granicu.</p>
<p class="top">Ovo je rečenica koja ima samo gornju granicu.</p>
<p class="bottom">Ovo je rečenica koja ima samo donju granicu.</p>

</body>
</html>

REZULTAT

Ovo je rečenica koja ima samo lijevu granicu.

Ovo je rečenica koja ima samo desnu granicu.

Ovo je rečenica koja ima samo gornju granicu.

Ovo je rečenica koja ima samo donju granicu.

Određivanje zaobljenih granica:

Zaobljene granice se određuju border-radius parametrom.

border-radius: 5px;

CSS

p.br5px {
   border: 2px solid #8300FF;
   border-radius:: 5px;
}

p.br10px {
   border: 2px solid #8300FF;
   border-radius:: 10px;
}

p.br50px {
   border: 2px solid #8300FF;
   border-radius:: 50px;
}

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

<style>
p.br5px {
 border: 2px solid #8300FF;
 border-radius: 5px;
}

p.br10px {
 border: 2px solid #8300FF;
 border-radius: 10px;
}

p.br50px {
 border: 2px solid #8300FF;
 border-radius: 50px;
}
</style>

</head>
<body>

<p class="br5px">Ovo je rečenica koja ima zaobljenost granice 5 pixela.</p>
<p class="br10px">Ovo je rečenica koja ima zaobljenost granice 10 pixela.</p>
<p class="br50px">Ovo je rečenica koja ima zaobljenost granice 50 pixela.</p>

</body>
</html>

REZULTAT

Ovo je rečenica koja ima zaobljenost granice 5 pixela.

Ovo je rečenica koja ima zaobljenost granice 10 pixela.

Ovo je rečenica koja ima zaobljenost granice 50 pixela.

undo redo

w3sedic

CSS

CSS Borders