Bordes en CSS | Explicado

Cuando visitamos un sitio web, a veces fuimos testigos de algunos cuadros hermosos alrededor del texto que mejoran la interfaz de usuario y ayudan a mejorar la interactividad del contenido. En CSS, estos marcos se denominan fronteras y juegan un papel importante en el diseño web. CSS proporciona múltiples propiedades de borde que nos permiten establecer el estilo, el ancho, etc. del borde.

Este artículo presenta una amplia descripción de las siguientes propiedades del borde:

• estilo de borde: Se usa para establecer el estilo del borde como punteado, sólido, etc.
• color del borde: Se usa para establecer el color del borde como rojo, #00ff00, etc.
• ancho del borde: Se usa para establecer el ancho del borde como grueso, delgado, píxel, etc.

Este artículo explicará cómo usar cada una de las propiedades mencionadas anteriormente con la ayuda de ejemplos.

Propiedad de estilo fronterizo CSS

Una propiedad que determina cómo la aparición del borde. La propiedad de estilo fronterizo CSS proporciona los siguientes valores:

• oculto: Establezca el borde oculto.
• sólido: Establezca el borde de la línea continua.
• punteado: especificar el borde punteado.
• discontinuos: Establezca el borde discontinuo.
• doble: Establezca el borde de la línea doble.
• ranura: determina el borde ranurado 3D.
• cresta: establece el borde de la cresta 3D.
• recuadro: determina el borde de inserción 3D
• comienzo: Se usa para establecer el borde de salida 3D

Nota: El efecto 3D de la ranura, la cresta, el recuadro y el principio depende del valor de color del borde.

Ejemplo El siguiente código crea múltiples párrafos e implementa todos los valores mencionados anteriormente para mostrar los efectos de cada propiedad de estilo fronterizo CSS:

Html

Párrafo con borde escondido

Párrafo con borde sólido

Párrafo con borde punteado

Párrafo con borde discontinuo

Párrafo con doble borde

Párrafo con borde de ritmo

Párrafo con frontera de cresta

Párrafo con borde de inserción

Párrafo con borde de principio

CSS

.bordado oculto
relleno: 0;
estilo fronterizo: oculto;

.sólido
relleno: 0;
estilo fronterizo: sólido;

.bordado de punta
relleno: 0;
estilo fronterizo: punteado;

.bordado discontinuo
relleno: 0;
estilo fronterizo: discontinuo;

.Doble borden
relleno: 0;
estilo fronterizo: doble;

.borden de ranura
relleno: 0;
estilo fronterizo: ritmo;

.border de cresta
relleno: 0;
estilo fronterizo: cresta;

.bordado de inserción
relleno: 0;
estilo fronterizo: recuadro;

.brote de arte
relleno: 0;
estilo fronterizo: comienzo;

El código anterior generará la siguiente salida:

Propiedad de color fronterizo CSS

Como el nombre en sí mismo indica, nos permite especificar el color del borde. El color se puede especificar usando nombres de color predefinidos, valores hexadecimales, etc. El color de cada lado se puede modificar individualmente utilizando propiedades de color inferior de borde, color de borde, color-color-color-color y borde-color-color-color-color.

Ejemplo Consideremos la pieza de código dada a continuación que especifica el color del borde utilizando el código hexadecimal:

Html

Un simple ejemplo de color fronterizo.

CSS

pags
estilo fronterizo: discontinuo;
color de borde: #00f;

El código anterior generará el siguiente código:

Extendamos un poco el código anterior para colorear cada lado del borde de manera diferente.

Html

Un simple ejemplo de color fronterizo.

CSS

pags
estilo fronterizo: discontinuo;
border-top-color: #00f;
color-fondo de borde: #f00;
color de la izquierda fronteriza: #000;
border-derecho-color: #0f0;

Obtendremos la siguiente salida:

Propiedad de ancho fronterizo de CSS

La propiedad de ancho de borde se utiliza para establecer el ancho del borde. La propiedad de ancho de borde toma valores en términos de píxeles o un valor predefinido como grueso, delgado, etc.

Ejemplo Consideremos el siguiente código que especifica el ancho del borde como 2 píxeles:

Html

Un simple ejemplo de ancho de frontera.

CSS

pags
estilo fronterizo: sólido;
ancho de la frontera: 2px;

Obtendremos la siguiente salida:

Propiedad CSS Border-Radius

La propiedad de Radius de borde especifica un borde redondeado a un elemento y la longitud determina la forma de sus esquinas.

Ejemplo Consideremos la siguiente pieza de código que especifica el radio fronterizo como 10 píxeles:

Html

Un simple ejemplo de radio fronterizo.

CSS

pag
borde: 2px sólido;
Border-Radius: 10px;

Producción

La salida verifica que la propiedad Border-Radius proporciona una forma redondeada a la esquina del borde:

Propiedad de la taquigrafía del borde de CSS

CSS proporciona una propiedad en taquigrafía para el ancho de la frontera, el estilo y el color que nos permite implementar todas estas propiedades del borde en una sola línea.

Ejemplo

En el código dado a continuación, implementamos múltiples propiedades en una sola línea CSS utilizando una propiedad abreviada:

Html

Un simple ejemplo de propiedad de taquigrafía de borde de borde.

CSS

pag
borde: 3px azul sólido;

En lugar de implementar cada propiedad fronteriza individualmente, el código anterior implementa el ancho del borde,

La salida verificó que la propiedad abreviada implementó las tres propiedades fronterizas con éxito.

Conclusión

CSS proporciona propiedades de ancho de borde, estilo fronterizo y color de borde para establecer el ancho de borde, el estilo de borde y el color del borde de un elemento HTML respectivamente. Este artículo proporciona una descripción completa de CSS Borders y analiza cómo crear un borde, establecer el color del borde, modificar el estilo del borde y establecer el ancho del borde con la ayuda de ejemplos simples y fáciles de entender.