De gräns är en stenografiegenskap i CSS, som används för att lägga till en kantlinje på ett element. Det låter oss ange rutans kant. Den anger bredden, stilen och färgen på kanten. Denna CSS-egenskap innehåller följande kantegenskaper:

gränsbredd:Egenskapen border-width används för att ställa in kantens bredd. Vi kan också använda de fördefinierade värdena som är tunn, medium, och tjock för att ställa in bredden på kanten. Den anger tjockleken på bården. Dess standardvärde är medium .
Den här egenskapen kan inte användas ensam. Den används alltid med andra gränsegenskaper som egenskapen 'border-style' för att ställa in gränsen först; annars kommer det inte att fungera.
Kantens bredd kan vara olika för varje enskild sida. Det kan göras genom att använda kant-botten-bredd, border-top-width, border-right-width , och kant-vänster-bredd .border-stil:Den här egenskapen anger kantens stil. Den definierar om gränsen är heldragen, prickad, streckad, dubbel, skåra och ett av de andra möjliga värdena. Utan att ställa in den här egenskapen, det vill säga utan att ställa in kantstilen, kommer ingen av de andra kantegenskaperna att fungera. Gränsen kommer att vara osynlig utan att ange border-stil . Detta beror på att standardvärdet för den här CSS-egenskapen är ingen .
Liknande gränsbredd , gränsens stil kan vara olika för varje enskild sida. Det kan göras med hjälp av egenskaperna gräns-botten-stil, gräns-topp-stil, gräns-höger-stil , och gräns-vänster-stil .gräns färg:Det tillåter oss att ändra färgen på kanten. Vi kan ställa in färgen genom att använda färgnamnet, RGB-värdet eller hex-värdet. Liknar gränsbredd och border-stil , kan vi ändra färgen på kanten individuellt, det vill säga vi kan ändra färgen på botten, toppen, vänster och höger sida av kanten på ett element. Det kan göras genom att använda egenskaperna kant-botten-färg, kant-topp-färg, kant-höger-färg , och kant-vänster-färg .
De gräns färg egendom kan inte användas ensam. Den måste användas med andra gränsegenskaper som egenskapen 'border-style' för att ställa in gränsen; annars kommer det inte att fungera.

gräns kontra kontur

Även om gränser och konturer är väldigt lika, finns det några skillnader mellan konturer och gränser som är följande:

• Med en kontur kan vi inte tillämpa olika konturbredd, stil och färg för de fyra sidorna av ett element, medan vi i en ram kan tillämpa det angivna värdet för alla fyra sidorna av ett element.
• Kanten är en del av elementets dimension, medan konturen inte är delen av elementets dimension. Det betyder att det inte spelar någon roll hur tjock kontur vi applicerar på elementet, dimensionerna på det kommer inte att ändras.

Låt oss se ett exempel för att förstå gränsegendomen.

Exempel

 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> 

Produktion

Nu finns det ett annat exempel där vi använder båda skissera och gräns egenskaper.

Exempel

 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. 

Produktion