The meja je skrajšana lastnost v CSS, ki se uporablja za dodajanje obrobe elementu. Omogoča nam, da določimo obrobo polja. Nastavi širino, slog in barvo obrobe. Ta lastnost CSS vključuje naslednje lastnosti obrobe:
Te lastnosti ni mogoče uporabiti samostojno. Vedno se uporablja z drugimi lastnostmi meje, kot je lastnost 'border-style', da se najprej nastavi meja; sicer ne bo delovalo.
Širina obrobe je lahko različna za vsako posamezno stran. To lahko storite z uporabo robne širine spodaj, border-top-width, border-desno-width , in border-left-width .
Podoben border-width , je lahko stil obrobe različen za vsako posamezno stran. To je mogoče storiti z uporabo lastnosti slog obrobe spodaj, slog obrobe zgoraj, slog obrobe desno , in mejno-levi slog .
The barva obrobe lastnine ni mogoče uporabljati samostojno. Za nastavitev meje ga je treba uporabiti z drugimi lastnostmi obrobe, kot je lastnost 'border-style'; sicer ne bo delovalo.
obroba proti obrisu
Čeprav so si meje in obrisi zelo podobni, obstaja nekaj razlik med obrisi in obrobami, ki so naslednje:
- Z uporabo orisa ne moremo uporabiti različne širine obrisa, sloga in barve za štiri strani elementa, medtem ko lahko v obrobi uporabimo navedeno vrednost za vse štiri strani elementa.
- Obroba je del dimenzije elementa, obris pa ni del dimenzije elementa. Pomeni, ne glede na to, kako debel obris nanesemo na element, se njegove dimenzije ne bodo spremenile.
Oglejmo si primer za razumevanje lastnosti meje.
Primer
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>Preizkusite zdaj
Izhod
Zdaj pa obstaja še en primer, v katerem uporabljamo oboje oris in meja lastnosti.
Primer
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.Preizkusite zdaj
Izhod