El borde es una propiedad abreviada en CSS, que se utiliza para agregar un borde a un elemento. Nos permite especificar el borde del cuadro. Establece el ancho, el estilo y el color del borde. Esta propiedad CSS incluye las siguientes propiedades de borde:

ancho del borde:La propiedad border-width se utiliza para establecer el ancho del borde. También podemos utilizar los valores predefinidos que están delgada, mediana, y grueso para establecer el ancho del borde. Establece el grosor del borde. Su valor predeterminado es medio .
Esta propiedad no se puede utilizar sola. Siempre se usa con otras propiedades de borde como la propiedad 'estilo de borde' para establecer el borde primero; De lo contrario, no funcionará.
El ancho del borde puede ser diferente para cada lado individual. Se puede hacer usando el ancho del borde inferior, borde-ancho-superior, borde-ancho-derecho , y ancho-frontera-izquierda .estilo de borde:Esta propiedad especifica el estilo del borde. Define si el borde es sólido, punteado, discontinuo, doble, surco y uno de los otros valores posibles. Sin configurar esta propiedad, es decir, sin configurar el estilo del borde, ninguna de las otras propiedades del borde funcionará. El borde será invisible sin especificar el estilo de borde . Esto se debe a que el valor predeterminado de esta propiedad CSS es ninguno .
Similar a ancho del borde , el estilo del borde puede ser diferente para cada lado individual. Se puede hacer usando las propiedades. estilo de borde inferior, estilo de borde superior, estilo de borde derecho , y estilo borde izquierdo .color del borde:Nos permite cambiar el color del borde. Podemos configurar el color usando el nombre del color, el valor RGB o el valor hexadecimal. Similar a ancho del borde y estilo de borde , podemos cambiar el color del borde individualmente, es decir, podemos cambiar el color del lado inferior, superior, izquierdo y derecho del borde de un elemento. Se puede hacer usando las propiedades color-inferior-borde, color-superior-borde, color-borde-derecho , y color-borde-izquierdo .
El color del borde La propiedad no se puede utilizar sola. Debe usarse con otras propiedades de borde como la propiedad 'estilo de borde' para establecer el borde; De lo contrario, no funcionará.

borde versus contorno

Aunque los bordes y los contornos son muy similares, existen algunas diferencias entre los contornos y los bordes que son las siguientes:

• Al usar un contorno, no podemos aplicar diferentes anchos, estilos y colores de contorno para los cuatro lados de un elemento, mientras que, en un borde, podemos aplicar el valor proporcionado para los cuatro lados de un elemento.
• El borde es parte de la dimensión del elemento, mientras que el contorno no es parte de la dimensión del elemento. Significa que no importa qué tan grueso sea el contorno que apliquemos al elemento, sus dimensiones no cambiarán.

Veamos un ejemplo para entender la propiedad fronteriza.

Ejemplo

 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> 

Producción

Ahora, hay otro ejemplo en el que estamos usando ambos describir y borde propiedades.

Ejemplo

 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. 

Producción