The rajaa on CSS:n pikakirjoitusominaisuus, jota käytetään reunuksen lisäämiseen elementtiin. Sen avulla voimme määrittää laatikon reunan. Se määrittää reunuksen leveyden, tyylin ja värin. Tämä CSS-ominaisuus sisältää seuraavat reunaominaisuudet:

reunan leveys:Bord-width -ominaisuutta käytetään reunan leveyden asettamiseen. Voimme myös käyttää ennalta määritettyjä arvoja, jotka ovat ohut, keskikokoinen, ja paksu asettaaksesi reunuksen leveyden. Se määrittää reunuksen paksuuden. Sen oletusarvo on keskikokoinen .
Tätä omaisuutta ei voi käyttää yksinään. Sitä käytetään aina muiden reunusominaisuuksien, kuten 'border-style' -ominaisuuden, kanssa rajan asettamiseen ensin; muuten se ei toimi.
Reunuksen leveys voi olla erilainen jokaisella sivulla. Se voidaan tehdä käyttämällä reuna-alha-leveyttä, border-top-width, border-right-width , ja raja-vasen-leveys .reunatyyli:Tämä ominaisuus määrittää reunuksen tyylin. Se määrittää, onko reunus kiinteä, katkoviiva, katkoviiva, kaksoisviiva, ura tai jokin muista mahdollisista arvoista. Ilman tätä ominaisuutta, eli ilman reunatyyliä, mikään muu reunaominaisuus ei toimi. Reuna on näkymätön määrittämättä rajatyyliin . Tämä johtuu siitä, että tämän CSS-ominaisuuden oletusarvo on ei mitään .
Samanlainen kuin reunan leveys , reunuksen tyyli voi olla erilainen jokaisella sivulla. Se voidaan tehdä ominaisuuksien avulla border-bottom-style, border-top-tyyli, reunus-oikea-tyyli , ja reuna-vasen-tyyli .reunuksen väri:Sen avulla voimme muuttaa reunuksen väriä. Voimme asettaa värin käyttämällä värin nimeä, RGB-arvoa tai heksadesimaaliarvoa. Samanlainen kuin reunan leveys ja rajatyyliin , voimme muuttaa reunuksen väriä yksitellen, eli voimme muuttaa elementin reunuksen ala-, ylä-, vasemman ja oikean puolen väriä. Se voidaan tehdä käyttämällä ominaisuuksia raja-ala-väri, reuna-yläväri, reuna-oikea-väri , ja reuna-vasen-väri .
The reunuksen väri omaisuutta ei saa käyttää yksin. Sitä on käytettävä muiden reunaominaisuuksien kanssa, kuten 'border-style' -ominaisuuden kanssa rajan asettamiseen; muuten se ei toimi.

reuna vs. ääriviivat

Vaikka reunat ja ääriviivat ovat hyvin samankaltaisia, ääriviivojen ja ääriviivojen välillä on joitain eroja, jotka ovat seuraavat:

• Ääriviivaa käyttämällä emme voi käyttää erilaista ääriviivaleveyttä, tyyliä ja väriä elementin neljälle sivulle, kun taas reunassa voimme käyttää annettua arvoa elementin kaikille neljälle sivulle.
• Reuna on osa elementin ulottuvuutta, kun taas ääriviivat eivät ole osa elementin ulottuvuutta. Eli ei ole väliä kuinka paksua ääriviivaa elementille levitetään, sen mitat eivät muutu.

Katsotaanpa esimerkkiä rajaominaisuuden ymmärtämiseksi.

Esimerkki

 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> 

Lähtö

Nyt on toinen esimerkki, jossa käytämme molempia ääriviivat ja rajaa ominaisuuksia.

Esimerkki

 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. 

Lähtö