The granica je skraćeno svojstvo u CSS-u koje se koristi za dodavanje obruba na element. Omogućuje nam da odredimo obrub okvira. Postavlja širinu, stil i boju obruba. Ovo CSS svojstvo uključuje sljedeća svojstva obruba:

širina granice:Svojstvo border-width koristi se za postavljanje širine obruba. Također možemo koristiti unaprijed definirane vrijednosti koje su tanka, srednja, i debeo za postavljanje širine obruba. Postavlja debljinu obruba. Njegova zadana vrijednost je srednji .
Ova se nekretnina ne može koristiti sama. Uvijek se koristi s drugim svojstvima obruba kao što je svojstvo 'border-style' da se prvi postavi obrub; inače neće raditi.
Širina obruba može biti različita za svaku pojedinu stranu. To se može učiniti korištenjem border-bottom-width, rub-gornja-širina, border-desno-širina , i border-left-width .stil obruba:Ovo svojstvo određuje stil obruba. Definira je li obrub pun, točkast, isprekidan, dvostruk, utor i neka od ostalih mogućih vrijednosti. Bez postavljanja ovog svojstva, tj. bez postavljanja stila obruba, nijedno od ostalih svojstava obruba neće raditi. Granica će biti nevidljiva bez navođenja rubni stil . To je zato što je zadana vrijednost ovog CSS svojstva nikakav .
Slično border-width , stil obruba može biti različit za svaku pojedinu stranu. To se može učiniti pomoću svojstava rub-bottom-style, border-top-style, border-desni stil , i border-left-style .boja obruba:Omogućuje nam promjenu boje obruba. Boju možemo postaviti pomoću naziva boje, RGB vrijednosti ili hex vrijednosti. Slično kao i border-width i rubni stil , možemo promijeniti boju obruba pojedinačno, tj. možemo promijeniti boju donje, gornje, lijeve i desne strane obruba elementa. To se može učiniti korištenjem svojstava boja donje granice, boja gornje granice, boja desne granice , i rub-lijevo-boja .
The boja ruba imovina se ne može koristiti sama. Mora se koristiti s drugim svojstvima granice kao što je svojstvo 'border-style' za postavljanje granice; inače neće raditi.

obrub protiv obrisa

Iako su granice i obrisi vrlo slični, postoje neke razlike između obrisa i obruba koje su sljedeće:

• Korištenjem obrisa ne možemo primijeniti različitu širinu obrisa, stil i boju za četiri strane elementa, dok u obrubu možemo primijeniti danu vrijednost za sve četiri strane elementa.
• Obrub je dio dimenzije elementa, dok kontura nije dio dimenzije elementa. Znači, nije važno koliko debeli obris primijenimo na element, njegove dimenzije se neće promijeniti.

Pogledajmo primjer za razumijevanje svojstva granice.

Primjer

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} 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;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Izlaz

Sada, postoji još jedan primjer u kojem koristimo oboje obris i granica Svojstva.

Primjer

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Izlaz