CSS Border

La propiedad CSS border se utiliza para crear un borde alrededor de un elemento, definiendo el estilo, ancho, color y radio del borde. Es una herramienta poderosa para personalizar la apariencia de los elementos de una página web, agregando interés visual y estructura al diseño.

border-style

La propiedad borde-style se utiliza para establecer el estilo del borde. Puede tomar valores como «solid», «dotted», «dashed» y «double», entre otros. Aquí está la sintaxis:

.example {
  border-style: solid;
}

En este ejemplo, el borde del elemento con la clase «example» será una línea continua.

border-width

La propiedad border-width se utiliza para establecer el ancho del borde. Se puede especificar en píxeles, ems, rems u otras unidades CSS válidas. Aquí está la sintaxis:

.example {
  border-width: 2px;
}

En este ejemplo, el borde del elemento con la clase «example» tendrá un ancho de 2 píxeles.

border-color

La propiedad border-color se utiliza para establecer el color del borde. Puede tomar valores de color en varios formatos, como hexadecimal, RGB o nombres de colores. Aquí está la sintaxis:

.example {
  border-color: #ff0000;
}

En este ejemplo, el borde del elemento con la clase «example» tendrá un color rojo.

border-radius

La propiedad border-radius se utiliza para crear esquinas redondeadas para el borde. Puede ser necesario un valor de longitud o un porcentaje para definir el radio de las esquinas. Aquí está la sintaxis:

.example {
  border-radius: 10px;
}

En este ejemplo, el borde del elemento con la clase «example» tendrá un radio de borde de 10 píxeles.

border-collapse

La propiedad border-collapse se utiliza para especificar si los bordes de la tabla deben contraerse en un solo borde o separarse. Se utiliza específicamente con elementos <table>. Aquí está la sintaxis:

table {
  border-collapse: collapse;
}

En este ejemplo, los bordes de la tabla se contraerán en un solo borde.

border-spacing

La propiedad border-spacing se utiliza para establecer el espacio entre los bordes de las celdas adyacentes en una tabla. Se utiliza específicamente con elementos <table>. Aquí está la sintaxis:

table {
  border-spacing: 5px;
}

En este ejemplo, el espacio entre los bordes de las celdas adyacentes de la tabla será de 5 píxeles.

Conclusión

La propiedad CSS border es una herramienta versátil para diseñar elementos en una página web. Al manipular el estilo, el ancho, el color, el radio, el colapso y el espaciado de los bordes, los desarrolladores pueden crear diseños visualmente atractivos y bien estructurados.

Te puede interesar