El frontera és una propietat taquigràfica en CSS, que s'utilitza per afegir una vora a un element. Ens permet especificar la vora del quadre. Estableix l'amplada, l'estil i el color de la vora. Aquesta propietat CSS inclou les propietats de vora següents:

ample de vora:La propietat border-width s'utilitza per definir l'amplada de la vora. També podem utilitzar els valors predefinits que són prim, mitjà, i espés per definir l'amplada de la vora. Estableix el gruix de la vora. El seu valor predeterminat és mitjà .
Aquesta propietat no es pot utilitzar sola. Sempre s'utilitza amb altres propietats de vora com la propietat 'estil de vora' per establir primer la vora; en cas contrari, no funcionarà.
L'amplada de la vora pot ser diferent per a cada costat individual. Es pot fer utilitzant el border-bottom-width, vorera-ample-superior, vora-ample dreta , i vora-esquerra-amplada .estil de vora:Aquesta propietat especifica l'estil de la vora. Defineix si la vora és sòlida, puntejada, discontinua, doble, groove i un dels altres valors possibles. Sense establir aquesta propietat, és a dir, sense establir l'estil de la vora, cap de les altres propietats de la vora no funcionarà. La vora serà invisible sense especificar estil de vora . Això es deu al fet que el valor predeterminat d'aquesta propietat CSS és cap .
Semblant a ample de vora , l'estil de la vora pot ser diferent per a cada costat individual. Es pot fer utilitzant les propietats l'estil de la vora inferior, l'estil de la vora superior, l'estil de la vora dreta , i estil de vora esquerra .color de la vora:Ens permet canviar el color de la vora. Podem establir el color utilitzant el nom del color, el valor RGB o el valor hexadecimal. Similar a la ample de vora i estil de vora , podem canviar el color de la vora individualment, és a dir, podem canviar el color de la part inferior, superior, esquerra i dreta de la vora d'un element. Es pot fer utilitzant les propietats vora-inferior-color, vora-superior-color, vora-dreta-color , i vora-color-esquerra .
El borde-color la propietat no es pot utilitzar sola. S'ha d'utilitzar amb altres propietats de la vora com la propietat 'estil de vora' per establir la vora; en cas contrari, no funcionarà.

frontera vs contorn

Tot i que les vores i els contorns són molt similars, hi ha algunes diferències entre contorns i vores que són les següents:

• Utilitzant un contorn, no podem aplicar diferents amplades, estil i color del contorn per als quatre costats d'un element, mentre que, en una vora, podem aplicar el valor proporcionat per als quatre costats d'un element.
• La vora és una part de la dimensió de l'element, mentre que el contorn no és la part de la dimensió de l'element. És a dir, no importa el gruix del contorn que apliquem a l'element, les dimensions no canviaran.

Vegem un exemple per entendre la propietat de la frontera.

Exemple

 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> 

Sortida

Ara, hi ha un altre exemple en què estem utilitzant tots dos esquema i frontera propietats.

Exemple

 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. 

Sortida