Granice na HTML stranicama pomažu privući pažnju ljudi na dio teksta ili ga okružiti drugim HTML elementima.
Kao što je dolje prikazano, možete koristiti HTML i CSS na web stranici za stvaranje okvira oko bilo kojeg teksta.
U primjeru okružujemo donji odlomak crvenom ivicom <p></p>.
<p style="border:2px; border-style:solid; border-color:#ff0000; padding: 1em;">Ovaj tekst je okružen obrubom crvene boje.<br>Ovo je druga linija teksta sa obrubom crvene boje.</p>U gornjem kodu stil definira veličinu obruba (px kratica za piksele), vrstu stila i boju obruba.
Stil obruba je način na koji se ivica prikazuje na ekranu.
Druge vrste granica uključuju isprekidane linije, dvostruke linije, utore, grebene, umetanje i izbacivanje.
Boja obruba definira boju koja će se koristiti za obrub.
U gornjem primjeru koristi se za boju #ff0000, koja je oznaka boje za crvenu.
Definiranje stila pomoću CSS-a
Izgled elemenata na web stranici također se može definirati ugrađenim CSS-om.
Ugrađeni CSS definiran je u <head></head> elementu HTML dokumenta.
Alternativno, možete definirati CSS u vanjskoj datoteci sa .css nastavkom.
Zatim možete povezati ovu datoteku s bilo kojim HTML dokumentom, a elementi u tom dokumentu mogu pristupiti CSS stilovima.
Na primjer, sljedeći CSS kôd stvorit će novu klasu koja se naziva “borderexample”, koja se može primijeniti na bilo koju drugu HTML oznaku.
<style>
.borderexample {
border-style:solid;
border-color:#287EC7;
}
</style>Koristeći gornji kôd, ako želite primijeniti ovaj stil obruba na HTML odlomak, možete upisati nešto slično sljedećem primjeru.
<p class="borderexample">Ovo je primjer obruba.</p>