TechCodeview

Det grænse er en stenografiegenskab i CSS, som bruges til at tilføje en kant på et element. Det giver os mulighed for at angive boksens kant. Det indstiller bredden, stilen og farven på kanten. Denne CSS-ejendom inkluderer følgende kantegenskaber:

grænse-bredde:Egenskaben border-width bruges til at indstille grænsens bredde. Vi kan også bruge de foruddefinerede værdier, der er tynd, medium, og tyk for at indstille bredden af ​​kanten. Det sætter tykkelsen af ​​grænsen. Dens standardværdi er medium .
Denne ejendom kan ikke bruges alene. Den bruges altid sammen med andre grænseegenskaber som egenskaben 'border-style' for at sætte grænsen først; ellers vil det ikke virke.
Kantens bredde kan være forskellig for hver enkelt side. Det kan gøres ved at bruge kant-bund-bredden, border-top-width, border-right-width , og grænse-venstre-bredde .border-stil:Denne egenskab angiver grænsens stil. Den definerer, om grænsen er solid, stiplet, stiplet, dobbelt, rille og en af ​​de andre mulige værdier. Uden at indstille denne egenskab, dvs. uden at indstille kantstilen, vil ingen af ​​de andre kantegenskaber fungere. Grænsen vil være usynlig uden at specificere grænse-stil . Dette skyldes, at standardværdien for denne CSS-egenskab er ingen .
Svarende til grænse-bredde , stilen af ​​grænsen kan være forskellig for hver enkelt side. Det kan gøres ved hjælp af egenskaberne border-bottom-style, border-top-style, border-right-style , og grænse-venstre-stil .kant-farve:Det giver os mulighed for at ændre farven på kanten. Vi kan indstille farven ved at bruge farvenavnet, RGB-værdien eller hex-værdien. Svarende til grænse-bredde og grænse-stil , kan vi ændre farven på kanten individuelt, dvs. vi kan ændre farven på bunden, toppen, venstre og højre side af kanten af ​​et element. Det kan gøres ved at bruge egenskaberne kant-bund-farve, kant-top-farve, kant-højre-farve , og kant-venstre-farve .
Det kant-farve ejendom kan ikke bruges alene. Det skal bruges sammen med andre grænseegenskaber som egenskaben 'border-style' for at indstille grænsen; ellers vil det ikke virke.

grænse vs. omrids

Selvom grænser og konturer er meget ens, er der nogle forskelle mellem konturer og grænser, der er som følger:

• Ved at bruge en kontur kan vi ikke anvende forskellig konturbredde, stil og farve for de fire sider af et element, hvorimod vi i en kant kan anvende den angivne værdi for alle fire sider af et element.
• Grænsen er en del af elementets dimension, hvorimod omridset ikke er delen af ​​elementets dimension. Det betyder, at det er lige meget, hvor tykt et omrids vi anvender på elementet, dimensionerne af det vil ikke ændre sig.

Lad os se et eksempel for at forstå grænseegenskaben.

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> 

Produktion

Nu er der et andet eksempel, hvor vi bruger begge dele omrids og grænse ejendomme.

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. 

Produktion