De grens is een verkorte eigenschap in CSS, die wordt gebruikt om een ​​rand aan een element toe te voegen. Hiermee kunnen we de rand van het vak specificeren. Het bepaalt de breedte, stijl en kleur van de rand. Deze CSS-eigenschap bevat de volgende randeigenschappen:

grensbreedte:De border-with eigenschap wordt gebruikt om de breedte van de rand in te stellen. We kunnen ook de vooraf gedefinieerde waarden gebruiken die dat wel zijn dun, medium, En dik om de breedte van de rand in te stellen. Het bepaalt de dikte van de rand. De standaardwaarde is medium .
Deze woning kan niet alleen worden gebruikt. Het wordt altijd gebruikt met andere randeigenschappen, zoals de eigenschap 'border-style', om eerst de rand in te stellen; anders zal het niet werken.
De breedte van de rand kan per zijde verschillend zijn. Dit kan worden gedaan door de rand-onder-breedte te gebruiken, rand-boven-breedte, rand-rechts-breedte , En rand-links-breedte .randstijl:Deze eigenschap specificeert de stijl van de rand. Het definieert of de rand effen, gestippeld, gestippeld, dubbel, gegroefd en een van de andere mogelijke waarden is. Zonder deze eigenschap in te stellen, d.w.z. zonder de randstijl in te stellen, zullen geen van de andere randeigenschappen werken. De rand zal onzichtbaar zijn zonder de rand-stijl . Dit komt omdat de standaardwaarde van deze CSS-eigenschap is geen .
Gelijkwaardig aan grensbreedte kan de stijl van de rand voor elke zijde verschillend zijn. Dit kan gedaan worden met behulp van de eigenschappen rand-onder-stijl, rand-boven-stijl, rand-rechts-stijl , En border-links-stijl .rand kleur:Hiermee kunnen we de kleur van de rand wijzigen. We kunnen de kleur instellen door de kleurnaam, RGB-waarde of hexadecimale waarde te gebruiken. Vergelijkbaar met de grensbreedte En rand-stijl , kunnen we de kleur van de rand individueel wijzigen, d.w.z. we kunnen de kleur van de onder-, boven-, linker- en rechterkant van de rand van een element wijzigen. Dit kan gedaan worden door gebruik te maken van de eigenschappen rand-onder-kleur, rand-boven-kleur, rand-rechts-kleur , En grens-links-kleur .
De rand kleur eigendom kan niet alleen worden gebruikt. Het moet worden gebruikt met andere randeigenschappen, zoals de eigenschap 'border-style' om de rand in te stellen; anders zal het niet werken.

rand versus omtrek

Hoewel randen en omtrekken erg op elkaar lijken, zijn er enkele verschillen tussen omtrekken en randen:

• Met behulp van een omtrek kunnen we geen verschillende breedte, stijl en kleur van de omtrek toepassen op de vier zijden van een element, terwijl we bij een rand de opgegeven waarde voor alle vier de zijden van een element kunnen toepassen.
• De rand maakt deel uit van de dimensie van het element, terwijl de omtrek geen deel uitmaakt van de dimensie van het element. Dit betekent dat het niet uitmaakt hoe dik de omtrek is die we op het element toepassen, de afmetingen ervan zullen niet veranderen.

Laten we een voorbeeld bekijken om de border-eigenschap te begrijpen.

Voorbeeld

 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> 

Uitvoer

Er is nog een voorbeeld waarin we beide gebruiken overzicht En grens eigenschappen.

Voorbeeld

 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. 

Uitvoer