Ohraničenie alebo border sa na stránkach vyskytuje dosť často. Preto sme tomu venovali celú kapitolu aj keď je to dosť jednoduché. Ohraničenia ako už samotný názov hovorí, budú ohraničovať nejaký objekt. Preto sa to aj po anglicky nazýva border. Borderu sa dá nastaviť veľa atribútov.
Farba borderu sa nastavuje:
border-color: red;
Šírka borderu sa nastavuje:
border-width: 10px;
Avšak na uľahčenie práce nám stačí tieto dve vlastnosti spojiť do jednej:
border: 10px solid red;
Farba borderu sa nastavuje:
border: 5px dotted black;
border: 5px dashed black;
border: 5px solid black;
border: 5px double black;
border: 5px groove grey;
border: 5px ridge grey;
border: 5px inset grey;
border: 5px outset grey;
border-style: dotted dashed solid double; border-width: 5px;
Pozornosť si zaslúži hlavne ten posledný. Všimnite si, že každá strana je iná. Dá sa to urobiť tak, že postupne nastavujete štýly jednotlivých strán v smere hodinových ručičiek začínajúc hornou. (tak isto sa dá nastavovať aj ich hrúbka a farba)
Ak by ste tam dali len dva štýly tak horná a spodná sú prvý štýl a pravá a ľavá druhý.
Samozejme môžete nastviť hranicu aj iba pre jednu stranu elementu.
border-left: 5px solid black;
(left sa dá nahradiť, ktorou koľvek inou stranou)
Nastavuje sa pomocou vlastnosti border-radius, ktorá určuje ako veľmi je ohraničenie zakrivené v rohoch. Čím väčšie číslo tým väčšie zakrivenie. Môžeme ho písať v pixeloch alebo percentách.
border: 5px solid black; border-radius: 5%;
border: 5px solid black; border-radius: 5px;