Construir un sitio web llamativo no es una tarea fácil, un desarrollador tiene que probar múltiples cosas para crear un sitio web atractivo como diferentes fondos, estilos, bordes, etc.

El borde CSS se puede usar alrededor del contenido para mejorar la apariencia del contenido. Las propiedades fronterizas nos permiten determinar el área fronteriza de un elemento (s). Se puede especificar un borde con múltiples estilos como una línea continua, guiones, etc.

Esta redacción proporcionará una descripción completa de la propiedad de ancho de frontera. Inicialmente, elabora cómo funcionan los valores predefinidos con la propiedad de ancho de frontera. Y después, demuestra el funcionamiento de la propiedad de ancho de borde utilizando algunos valores especificados.

Propiedad de ancho fronterizo

La propiedad de ancho de borde determina el ancho del borde de un elemento. Especifica el ancho del borde en las cuatro direcciones I.mi. arriba, abajo, derecha e izquierda. Cada valor asignado a la propiedad de ancho fronterizo se especificará a todos los lados.

Sintaxis
La sintaxis de la propiedad de ancho de borde se describe en el fragmento de abajo dados:

ancho de la frontera: tamaño;

El tamaño del ancho se puede especificar utilizando algunos valores predefinidos como grueso, delgado, medio o en forma de píxeles, puntos, centímetros, etc.

Consideremos algunos ejemplos para tener una comprensión profunda de la propiedad de ancho fronterizo en CSS.

Cómo asignar el ancho de la frontera utilizando valores predefinidos

En CSS podemos especificar el tamaño del borde utilizando los valores predefinidos como gruesos, delgados y medianos.

Ejemplo
La pieza de código a continuación establece el tamaño del borde de

, y

elemento usando valores predefinidos:

CSS

H1
estilo fronterizo: sólido;
ancho de la frontera: grueso;

pags
estilo fronterizo: sólido;
ancho fronterizo: medio;

Html

Ancho de borde utilizando valores predefinidos

Primer párrafo

Segundo parrafo

Producirá la siguiente salida:

Cómo agregar ancho de borde usando valores específicos

En CSS, podemos asignar un tamaño específico para establecer el ancho del borde (i.mi. PX, CM, etc.).

Ejemplo
El siguiente código establece el ancho del borde de

elemento en PX y ancho de borde de

En CM:

CSS

H1
estilo fronterizo: sólido;
ancho de la frontera: 0.1 cm;

pags
estilo fronterizo: sólido;
ancho fronterizo: 1px;

Html

Ancho de borde utilizando valores predefinidos

Primer párrafo

Segundo parrafo

Obtendremos la siguiente salida para el código anterior:

Cómo asignar anchos laterales específicos

En CSS, se pueden asignar anchos laterales específicos a la propiedad de ancho de la frontera. Por defecto, la propiedad de ancho de borde establece el ancho de la misma frontera en los cuatro lados. Sin embargo, podemos especificar el ancho de cada lado en el orden superior, derecha, inferior e izquierda.

Ejemplo
Este ejemplo asigna cuatro valores a la propiedad de ancho de fondo primero para el borde superior, segundo para el borde derecho, tercero para el fondo y el último para el borde izquierdo:

CSS

H1
estilo fronterizo: sólido;
ancho de la frontera: 0.3cm 0.2cm 0.1 0.2;

pags
estilo fronterizo: sólido;
ancho de borde: 3px 2px 1px 1px;

Hmtl

Ancho de borde utilizando valores predefinidos

Primer párrafo

Segundo parrafo

El código anterior producirá la siguiente salida:

Ejemplo 2
Este ejemplo asigna dos valores a la propiedad de ancho de fondo:

• El primer valor especifica el tamaño de la parte superior e inferior
• El segundo valor especifica el tamaño del lado izquierdo y derecho

CSS

H1
estilo fronterizo: sólido;
ancho de la frontera: 0.2cm 0.1 cm;

pags
estilo fronterizo: sólido;
ancho de borde: 2px 1px;

Html

Ancho de borde utilizando valores predefinidos

Primer párrafo

Segundo parrafo

El código dado anteriormente muestra la siguiente salida:

Una clara diferencia en los lados (arriba, inferior) y (izquierda, derecha) se puede observar en la salida.

Conclusión

La propiedad de ancho de borde establece las cuatro fronteras de un elemento. Si la propiedad de ancho de borde tiene un valor, entonces establecerá el mismo borde en los cuatro lados. En el caso de dos valores, el primer valor se refiere al "superior e inferior", y el segundo se refiere a las fronteras "izquierda y derecha". Si hay tres valores, primero se refiere al borde superior, el segundo se refiere al borde izquierdo y derecho, mientras que el tercero se refiere al borde inferior. Si hay cuatro valores, el orden girará en la rotación en sentido horario I.mi. arriba, derecha, abajo, izquierda.

Este artículo presentó una guía para establecer el ancho del borde utilizando valores predefinidos y valores especificados. Luego, este artículo explicó cómo establecer un tamaño de borde único para cada lado.