De grense er en stenografi-egenskap i CSS, som brukes til å legge til en kantlinje på et element. Det lar oss spesifisere kanten på boksen. Den angir bredden, stilen og fargen på kanten. Denne CSS-egenskapen inkluderer følgende kantegenskaper:

kantbredde:Border-width-egenskapen brukes til å angi kantlinjens bredde. Vi kan også bruke de forhåndsdefinerte verdiene som er tynn, middels, og tykk for å angi bredden på kanten. Den angir tykkelsen på kanten. Standardverdien er medium .
Denne egenskapen kan ikke brukes alene. Den brukes alltid med andre kantegenskaper som 'border-style'-egenskapen for å sette grensen først; ellers vil det ikke fungere.
Bredden på kanten kan være forskjellig for hver enkelt side. Det kan gjøres ved å bruke kant-bunn-bredden, border-top-width, border-right-width , og kant-venstre-bredde .border-stil:Denne egenskapen spesifiserer stilen på kantlinjen. Den definerer om rammen er solid, prikket, stiplet, dobbel, rille og en av de andre mulige verdiene. Uten å angi denne egenskapen, dvs. uten å angi kantstilen, vil ingen av de andre kantegenskapene fungere. Grensen vil være usynlig uten å spesifisere border-stil . Dette er fordi standardverdien til denne CSS-egenskapen er ingen .
Lik kant-bredde , stilen på grensen kan være forskjellig for hver enkelt side. Det kan gjøres ved å bruke egenskapene border-bottom-style, border-top-style, border-right-style , og grense-venstre-stil .grensefarge:Det lar oss endre fargen på kanten. Vi kan angi fargen ved å bruke fargenavnet, RGB-verdien eller hex-verdien. Ligner på kant-bredde og border-stil , kan vi endre fargen på kanten individuelt, det vil si at vi kan endre fargen på bunnen, toppen, venstre og høyre side av kanten til et element. Det kan gjøres ved å bruke egenskapene kant-bunn-farge, kant-topp-farge, kant-høyre-farge , og kant-venstre-farge .
De grensefarge eiendom kan ikke brukes alene. Den må brukes med andre kantegenskaper som 'border-style'-egenskapen for å sette grensen; ellers vil det ikke fungere.

grense vs. omriss

Selv om grenser og konturer er veldig like, er det noen forskjeller mellom konturer og grenser som er som følger:

• Ved å bruke en disposisjon kan vi ikke bruke forskjellig disposisjonsbredde, stil og farge for de fire sidene av et element, mens vi i en kantlinje kan bruke den angitte verdien for alle fire sidene av et element.
• Kanten er en del av elementets dimensjon, mens omrisset ikke er delen av elementets dimensjon. Det betyr at det ikke spiller noen rolle hvor tykt omriss vi bruker på elementet, dimensjonene til det vil ikke endre seg.

La oss se et eksempel for å forstå grenseegenskapen.

Eksempel

 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> 

Produksjon

Nå er det et annet eksempel der vi bruker begge disposisjon og grense egenskaper.

Eksempel

 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. 

Produksjon