CSS - Border


Svojstva CSS granice (border-a)

Svojstvo border u CSS omogućava definisanje područja border-a okvira elementa. Border se pojavljuju direktno između margine i popunjavanja elementa. Boreder može biti unaprijed definisani stil poput pune crte, isprekidane crte, dvostruke crte itd. ili slika. Sljedeći dio opisuje kako postaviti stil, boju i širinu border-a.



Razumijevanje različitih stilova border-a

Svojstvo border-style postavlja stil okvira kao što su: puni, tačkasti itd. Stenografsko je svojstvo za postavljanje stila linije za sve četiri strane okvira elemenata. Svojstvo border-style može imati sljedeće vrijednosti: none, hidden, solid, dashed, dotted, double, inset, outset, groove, i ridge. Sada, pogledajmo sljedeću ilustraciju, ona vam daje osjećaj razlika između vrsta stilova boreder-a.





Vrijednosti none i hidden ne prikazuju okvire, međutim, postoji mala razlika između ove dvije vrijednosti. U slučaju rušenja ćelije tablele i okvira vrijednost none ima najmanji prioritet, dok hidden vrijednost ima najveći prioritet, ako je postavljena bilo koja druga sukobljena granica. Vrijednosti inset, outset, groove i ridge stvaraju efekt sličan 3D-u koji u osnovi zavis od vrijednosti okvira boje. To se obično postiže stvaranjem "sjene" od dvije boje koje su malo svjetlije i tamnije od okvirne boje. Pogledajmo primjer:

h1 {
    border-style: dotted;
}
p {
    border-style: ridge;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS border-style svojstva</title>
<style>      
    p { 
        border-width: 15px;
        background: yellow;
        padding: 20px;
        margin: 20px;
    }
    p.none {
        border-style: none;
    }
    p.hidden {
        border-style: hidden;
    }
    p.dotted {
        border-style: dotted;
    }
    p.dashed {
        border-style: dashed;
    }
    p.solid {
        border-style: solid;
    }
    p.double {
        border-style: double;
    }
    p.groove {
        border-style: groove;
    }
    p.ridge {
        border-style: ridge;
    }
    p.inset {
        border-style: inset;
    }
    p.outset {
        border-style: outset;
    }
</style>
</head>
<body>
    <p class="none">Bez border-a.</p>
    <p class="hidden">Hidden border.</p>
    <p class="dotted">Dotted border.</p>
    <p class="dashed">Dashed border.</p>
    <p class="solid">Solid border.</p>
    <p class="double">Double border.</p>
    <p class="inset">Inset border.</p>
    <p class="outset">Outset border.</p>
    <p class="groove">Groove border.</p>
    <p class="ridge">Ridge border.</p>
</body>
</html>


Postavljanje širine granice (border-a)

Svojstvo border-width specifikuje širinu okvira područja. Stenografsko je svojstvo za istovremeno podešavanje debljine sve četiri stranice okvira elementa. Isprobajmo sljedeći primjer da bismo razumjeli kako to funkcioniše:

p {
    border-style: dashed;
    border-width: 10px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS border-width svojstvo</title>
<style>
    p { 
        border-style: solid;
        padding: 20px;
        margin: 20px;
    }
    p.one {
        border-width: 5px;
    }
    p.two {
        border-width: 5px 10px;
    }
    p.three {
        border-width: 5px 10px 15px;
    }
    p.four {
        border-width: medium 10px thick 15px;
    }
</style>
</head>
<body>
    <p class="one"><strong>Sintaksa s jednom vrijednošću:</strong> 
    pojedinačna vrijednost postavlja širinu sve četiri stranice.</p>

    <p class="two"><strong>Sintaksa s dvije vrijednosti:</strong> prva
    vrijednost postavlja širinu gornje i donje granice, dok druga 
    vrijednost postavlja širinu desne i lijeve bočne granice.</p>

    <p class="three"><strong>Sintaksa s tri vrijednosti:</strong> prva 
    vrijednost postavlja širinu gornje granice, druga vrijednost postavlja
    širinu desne i lijeve granice, a treća vrijednost postavlja širinu donje granice.</p>

    <p class="four"><strong>Sintaksa sa četiri vrijednosti:</strong> 
    svaka vrijednost postavlja širinu boredera pojedinačno u redosljedu
    gore, desno, dolje i lijevo.</p>
</body>
</html>


Određivanje boje okvira

Svojstvo border-color specifikuje boju okvira područja. Ovo je takođe stenografsko svojstvo za postavljanje boje na sve četiri strane okvira elementa. Sljedeća pravila stila dodaju puni (solid) okvir crvene boje oko paragrafa.

p {
    border-style: solid;
    border-color: #ff0000;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS border-color svojstvo</title>
<style>
    p { 
        border-width: 15px;
        padding: 20px;
        margin: 20px;
    }
    p.one {
        border-style: solid;
        border-color: #ff0000;
    }
    p.two {
        border-style: solid;
        border-color: #ff0000 #00ff00;
    }
    p.three {
        border-style: solid;
        border-color: #ff0000 #00ff00 #0000ff;
    }
    p.four {
        border-style: solid;
        border-color: #ff0000 #00ff00 #0000ff #ff00ff;
    }
</style>
</head>
<body>
    <p class="one"><strong>Sintaksa s jednom vrijednošću:</strong>
    pojedinačna vrijednost postavlja boju sve četiri bočne stranice.</p>

    <p class="two"><strong>Sintaksa sa dvije vrijednosti:</strong> 
    prva vrijednost postavlja boju gornje i donje granice, dok druga 
    vrijednost postavlja boju desne i lijeve bočne granice.</p>

    <p class="three"><strong>Sintaksa s tri vrijednosti:</strong> prva 
    vrijednost postavlja boju gornje granice, druga vrijednost postavlja 
    boju desne i lijeve granice, a treća vrijednost postavlja boju donje granice.</p>

    <p class="four"><strong>Sintaksa sa četiri vrijednosti:</strong>
    svaka vrijednost postavlja boju granice pojedinačno u redosljedu gore, desno, dolje i lijevo.</p>
</body>
</html>


Border Property

CSS svojstvo border je skraćeno svojstvo za postavljanje jednog ili više pojedinačnih svojstava okvira border-width, border-style i border-color u jednom pravilu. Pogledajmo sljedeći primjer da biste razumjeli kako to funkcioniše:

p {
    border: 5px solid #00ff00;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Skraćeno svojstvo CSS granice (border-a)</title>
<style>
    p { 
        border: 5px solid #00ff00;
  background: yellow;
        padding: 20px;
        margin: 20px;
    }
</style>
</head>
<body>
    <p>Ovo je paragraf s granicom (boreder-om).</p>
</body>
</html>

Ako je vrijednost za pojedinačno svojstvo okvira izostavljena ili nije navedena tokom postavljanja skraćenog svojstva okvira, umjesto toga će se koristiti zadana vrijednost za to svojstvo, ako postoji. Na primjer, ako vrijednost za svojstvo border-color nedostaje ili nije navedena prilikom postavljanja okvir, svojstvo boje elementa koristiće se kao vrijednost za boju okvira. U sljedećem primjeru, okvir će biti puna crvena linija širine 5px:

p {
    color: red;
    border: 5px solid;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izostavljeno svojstvo u boji granice (boreder-a)</title>
<style>
    p { 
        color: red;
  background: yellow;
        border: 5px solid;
        padding: 20px;
        margin: 20px;
    }
</style>
</head>
<body>
    <p>Boja granice (boreder-a) ovog pasusa ista je kao i boja teksta.</p>
</body>
</html>

Ali, u slučaju border-style izostavljanje vrijednosti uopšte neće dovesti do prikazivanja okvira, jer je zadana vrijednost za ovo svojstvo none. U sljedećem primjeru neće biti granice (boreder-a):

p {
    border: 5px #00ff00;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ignorisanje imovine u granici (boreder-u)</title>
<style>
    p { 
        border: 5px #00ff00;
        background: yellow;
        padding: 20px;
        margin: 20px;
    }
</style>
</head>
<body>
    <p>Ovaj paragraf nema granice (border-a).</p>
</body>
</html>