CSS Border

La propiedad “border” de CSS se utiliza para establecer los bordes de un elemento HTML. Puedes especificar los valores de la propiedad “border” de varias maneras:

  • Utilizando la sintaxis abreviada: border: tamaño estilo color;
  • Utilizando las propiedades individuales: border-width, border-style y border-color.

La sintaxis abreviada de la propiedad border permite especificar todos los valores en una sola línea, en el orden: tamaño, estilo, color. Cada uno de estos valores también se pueden especificar utilizando las propiedades border-width, border-style y border-color respectivamente.

Ejemplo:

/* Sintaxis abreviada */
border: 1px solid red;

/* Propiedades individuales */
border-width: 1px;
border-style: solid;
border-color: red;
Lenguaje del código: CSS (css)

En este ejemplo se establece un borde de 1px de ancho, con un estilo sólido y de color rojo.

También se pueden especificar los bordes para cada lado de un elemento de forma individual utilizando las propiedades border-top, border-right, border-bottom y border-left.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

HTML 5, JavaScript y CSS: Crea tu web y apps con el estánd...

Ver Ofertas en Amazon

El gran libro de HTML5, CSS3 y Javascript (Spanish Edition)

Ver Ofertas en Amazon

Ejemplos de uso

Aquí te muestro un ejemplo de cómo utilizar la propiedad “border” en un elemento HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Aplicando la propiedad border a un elemento div */
      div {
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div>
      Este es un ejemplo de un elemento div con un borde azul de 2px de ancho y estilo sólido.
    </div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se aplica un borde azul de 2px de ancho y estilo sólido al elemento div. El contenido dentro del div se verá rodeado por un borde azul.

También se pueden especificar los bordes para cada lado de un elemento de forma individual utilizando las propiedades border-top, border-right, border-bottom, border-left.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Aplicando la propiedad border a un elemento div */
      div {
        border-top: 2px solid blue;
        border-right: 2px solid green;
        border-bottom: 2px solid red;
        border-left: 2px solid yellow;
      }
    </style>
  </head>
  <body>
    <div>
      Este es un ejemplo de un elemento div con un borde azul de 2px de ancho y estilo sólido en la parte superior, verde en la parte derecha, rojo en la parte inferior, y amarillo en la parte izquierda.
    </div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se especifican los bordes para cada lado del elemento div de forma individual. El contenido dentro del div se verá rodeado por un borde azul en la parte superior, verde en la derecha, rojo en la parte inferior, y amarillo en la parte izquierda.

Valores

La propiedad “border” en CSS tiene varios posibles valores que puedes especificar, dependiendo de cómo quieres que se vea tu borde. Los posibles valores son:

  • Tamaño: Puedes especificar el tamaño del borde en píxeles (px), puntos (pt), o porcentaje (%).
  • Estilo: Puedes especificar el estilo del borde utilizando una de las siguientes opciones:
    • none: No se dibuja ningún borde.
    • solid: El borde es sólido.
    • dotted: El borde está formado por puntos.
    • dashed: El borde está formado por líneas discontinuas.
    • double: El borde está formado por dos líneas paralelas.
    • groove: El borde tiene un estilo de relieve en 3D.
    • ridge: El borde tiene un estilo de relieve invertido en 3D.
    • inset: El borde tiene un estilo de relieve hacia adentro.
    • outset: El borde tiene un estilo de relieve hacia afuera.
  • Color: Puedes especificar el color del borde utilizando una de las siguientes opciones:
    • Un nombre de color, como “red” o “blue”.
    • Un código hexadecimal, como “#ff0000” o “#0000ff”.
    • Un código RGB, como “rgb(255,0,0)” o “rgb(0,0,255)”.
    • Un código RGBA, como “rgba(255,0,0,1)” o “rgba(0,0,255,0.5)”.

Ejemplo:

border: 2px dotted #ff0000;
Lenguaje del código: CSS (css)

En este ejemplo se establece un borde de 2px de ancho, con un estilo de puntos y de color rojo.

Recuerda que también se pueden especificar los bordes para cada lado de un elemento de forma individual utilizando las propiedades border-top, border-right, border-bottom, border-left.

Ejemplos

Aquí te dejo algunos ejemplos concretos de cómo utilizar la propiedad “border” en un elemento HTML:

Ejemplo 1: Crear un borde sólido de 3px de ancho y color rojo alrededor de una imagen:

<img src="mi-imagen.jpg" style="border: 3px solid red;" alt="Mi imagen">
Lenguaje del código: CSS (css)

Ejemplo 2: Crear un borde de estilo “dotted” con un ancho de 1px y color verde para una tabla:

<table style="border: 1px dotted green;">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>
Lenguaje del código: HTML, XML (xml)

Ejemplo 3: Crear un borde sólido de 2px de ancho, color amarillo y redondear las esquinas con un radio de 10px para un botón:

<button style="border: 2px solid yellow; border-radius: 10px;">Haga clic aquí</button>
Lenguaje del código: HTML, XML (xml)

Ejemplo 4: Crear un borde de estilo «double» con un ancho de 3px y color azul para un elemento div:

<div style="border: 3px double blue;">
  Este es un ejemplo de un elemento div con un borde azul de 3px de ancho y estilo "double".
</div>
Lenguaje del código: HTML, XML (xml)

Ejemplo 5: Crear un borde sólido de 1px de ancho, color negro y redondear solo la esquina superior derecha con un radio de 5px para una caja de texto:

<input type="text" style="border: 1px solid black; border-top-right-radius: 5px;">
Lenguaje del código: HTML, XML (xml)

Propiedades relacionadas

La propiedad “border” en CSS tiene varias propiedades relacionadas que te permiten personalizar aún más tus bordes:

Aquí te dejo una lista de las principales propiedades relacionadas con “border” en CSS:

  1. border-width: permite especificar el ancho de los bordes.
  2. border-style: permite especificar el estilo de los bordes (solid, dotted, dashed, double, groove, ridge, inset, outset y none).
  3. border-color: permite especificar el color de los bordes.
  4. border-top: permite especificar los valores de borde para la parte superior del elemento.
  5. border-right: permite especificar los valores de borde para la parte derecha del elemento.
  6. border-bottom: permite especificar los valores de borde para la parte inferior del elemento.
  7. border-left: permite especificar los valores de borde para la parte izquierda del elemento.
  8. border-radius: permite especificar el radio de las esquinas redondas de los bordes.
  9. border-image: permite establecer una imagen como borde.
  10. border-collapse: permite especificar cómo se deben renderizar los bordes de las celdas de una tabla.
  11. border-spacing: permite especificar el espacio entre las celdas de una tabla cuando los bordes están juntos.
  12. box-sizing: permite especificar cómo se deben calcular el ancho y alto de un elemento en relación a su borde y relleno.
  13. outline: permite especificar un borde alrededor de un elemento que no afecta al tamaño del contenido.

Otras propiedades relacionadas con “border” en CSS que podrían ser útiles en algunos casos específicos:

  • border-top-width: permite especificar el ancho del borde superior de un elemento.
  • border-right-width: permite especificar el ancho del borde derecho de un elemento.
  • border-bottom-width: permite especificar el ancho del borde inferior de un elemento.
  • border-left-width: permite especificar el ancho del borde izquierdo de un elemento.
  • border-top-color: permite especificar el color del borde superior de un elemento.
  • border-right-color: permite especificar el color del borde derecho de un elemento.
  • border-bottom-color: permite especificar el color del borde inferior de un elemento.
  • border-left-color: permite especificar el color del borde izquierdo de un elemento.
  • border-top-style: permite especificar el estilo del borde superior de un elemento.
  • border-right-style: permite especificar el estilo del borde derecho de un elemento.
  • border-bottom-style: permite especificar el estilo del borde inferior de un elemento.
  • border-left-style: permite especificar el estilo del borde izquierdo de un elemento.
  • border-top-left-radius: permite especificar el radio de la esquina superior izquierda del borde.
  • border-top-right-radius: permite especificar el radio de la esquina superior derecha del borde.
  • border-bottom-left-radius: permite especificar el radio de la esquina inferior izquierda del borde.
  • border-bottom-right-radius: permite especificar el radio de la esquina inferior derecha del borde.
  • border-image-source: permite especificar la imagen utilizada como borde.
  • border-image-slice: permite especificar cómo se deben recortar las esquinas de la imagen de borde.
  • border-image-width: permite especificar el ancho de las imágenes de borde.
  • border-image-outset: permite especificar el margen exterior de la imagen de borde.
  • border-image-repeat: permite especificar cómo se deben repetir las imágenes de borde.

Ancho del borde con CSS

En CSS, la propiedad border-width se utiliza para establecer el ancho del borde de un elemento HTML. Esta propiedad acepta varios valores, que incluyen:

  • Números con unidades de medida (por ejemplo, pixels o puntos)
  • Palabras clave (thin, medium, thick)

Ejemplo:

border-width: 2px;
Lenguaje del código: CSS (css)
border-width: medium;
Lenguaje del código: CSS (css)

También es posible utilizar la propiedad abreviada border para establecer varias propiedades de borde al mismo tiempo, incluyendo el ancho.

Ejemplo:

border: 2px solid blue;
Lenguaje del código: CSS (css)

Además, es posible utilizar anchos diferentes para cada lado del borde.

Ejemplo:

border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 6px;
border-left-width: 8px;
Lenguaje del código: CSS (css)

Ten en cuenta que es importante utilizar unidades de medida consistentes al establecer el ancho del borde.

Por ejemplo, si utilizas pixels para el ancho del borde, deberías utilizar pixels para el alto y el ancho del elemento también.

Color del borde con CSS

En CSS, la propiedad border-color se utiliza para establecer el color del borde de un elemento HTML. Esta propiedad acepta varios valores, que incluyen:

  • Nombres de colores (por ejemplo, “red”, “blue”, “green”)
  • Valores de color en hexadecimal (por ejemplo, “#FF0000”, “#0000FF”, “#00FF00”)
  • Valores de color RGB o RGBA (por ejemplo, “rgb(255,0,0)”, “rgba(0,0,255,0.5)”)

Ejemplos:

border-color: red;
Lenguaje del código: CSS (css)
border-color: #0000FF;
Lenguaje del código: CSS (css)
border-color: rgba(0,255,0,0.5);
Lenguaje del código: CSS (css)

También es posible utilizar la propiedad abreviada border para establecer varias propiedades de borde al mismo tiempo, incluyendo el color.

Ejemplo:

border: 2px solid red;
Lenguaje del código: CSS (css)

Además, es posible utilizar colores diferentes para cada lado del borde.

Ejemplo:

border-top-color: blue;
border-right-color: green;
border-bottom-color: orange;
border-left-color: purple;
Lenguaje del código: CSS (css)

Ten en cuenta que al utilizar valores RGBA, se puede establecer una transparencia en el color, utilizando el cuarto valor (alpha) que va desde 0 (totalmente transparente) hasta 1 (totalmente opaco).

Es importante tener en cuenta que algunos navegadores pueden tener dificultades para mostrar ciertos valores de color, especialmente los valores RGBA.

Por lo tanto, es recomendable utilizar valores de color compatibles con la mayoría de los navegadores para garantizar una experiencia de usuario consistente.

Lados del borde con CSS

En CSS, es posible establecer estilos, anchos y colores diferentes para cada lado del borde de un elemento HTML utilizando las propiedades específicas para cada lado del borde. Estas propiedades incluyen:

  • border-top-width, border-top-style, border-top-color: para establecer el ancho, estilo y color del borde superior.
  • border-right-width, border-right-style, border-right-color: para establecer el ancho, estilo y color del borde derecho.
  • border-bottom-width, border-bottom-style, border-bottom-color: para establecer el ancho, estilo y color del borde inferior.
  • border-left-width, border-left-style, border-left-color: para establecer el ancho, estilo y color del borde izquierdo.

Ejemplos:

border-top-width: 2px;
border-top-style: solid;
border-top-color: blue;
Lenguaje del código: CSS (css)
border-right-width: 4px;
border-right-style: dotted;
border-right-color: red;
Lenguaje del código: CSS (css)
border-bottom-width: 6px;
border-bottom-style: dashed;
border-bottom-color: green;
Lenguaje del código: CSS (css)
border-left-width: 8px;
border-left-style: double;
border-left-color: orange;
Lenguaje del código: CSS (css)

También es posible utilizar la propiedad abreviada border para establecer varias propiedades de borde al mismo tiempo, incluyendo las propiedades específicas para cada lado del borde.

Ejemplo:

border-top: 2px solid blue;
border-right: 4px dotted red;
border-bottom: 6px dashed green;
border-left: 8px double orange;
Lenguaje del código: CSS (css)

Ten en cuenta que estas propiedades específicas para cada lado del borde se utilizan para dar más control sobre el diseño de los bordes de los elementos HTML, pero pueden ser más tediosas de escribir y mantener que las propiedades abreviadas. Utiliza la que mejor se adapte a tus necesidades.

Bordes redondeados con CSS

En CSS, la propiedad border-radius se utiliza para crear bordes redondeados en los elementos HTML. Esta propiedad acepta varios valores, que incluyen:

  • Números con unidades de medida (por ejemplo, pixels o puntos) para establecer el radio de curvatura de los bordes redondeados.
  • Valores porcentuales para establecer el radio de curvatura de los bordes redondeados en relación con el tamaño del elemento.

Ejemplo:

border-radius: 25px;
Lenguaje del código: CSS (css)
border-radius: 10%;
Lenguaje del código: CSS (css)

Además, es posible establecer radios de curvatura diferentes para cada esquina del borde utilizando las propiedades específicas para cada esquina. Estas propiedades incluyen:

  • border-top-left-radius, border-top-right-radius: para establecer el radio de curvatura de las esquinas superior izquierda y superior derecha.
  • border-bottom-left-radius, border-bottom-right-radius: para establecer el radio de curvatura de las esquinas inferior izquierda y inferior derecha.

Ejemplo:

border-top-left-radius: 25px;
border-top-right-radius: 50px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 100px;
Lenguaje del código: CSS (css)

También es posible utilizar un valor único para las propiedades específicas para cada esquina para crear un borde redondeado con un radio de curvatura uniforme.

Ejemplo:

border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
Lenguaje del código: CSS (css)

Es importante tener en cuenta que algunos navegadores pueden tener dificultades para mostrar bordes redondeados con radios de curvatura muy grandes, especialmente en elementos con bordes muy anchos.

Por lo tanto, es recomendable utilizar radios de curvatura moderados para garantizar una experiencia de usuario consistente.

Ejemplo con código HTML y CSS

Aquí te dejo un ejemplo más detallado de código HTML y CSS que muestra cómo utilizar varias propiedades de borde para personalizar un elemento.

En este caso, se utiliza una etiqueta div como elemento de ejemplo:

<div id="miDiv">Este es mi div</div>
Lenguaje del código: HTML, XML (xml)
#miDiv {
  width: 200px;
  height: 100px;
  padding: 20px;
  border-top: 2px solid blue;
  border-right: 4px dotted red;
  border-bottom: 6px dashed green;
  border-left: 8px double orange;
  border-top-left-radius: 25px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 75px;
  border-bottom-right-radius: 100px;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establece un ancho y un alto para el elemento div utilizando las propiedades width y height. También se establece un relleno utilizando la propiedad padding para crear espacio entre el contenido del div y su borde.

Luego, se utilizan las propiedades border-top, border-right, border-bottom, y border-left para establecer un borde sólido de 2 pixels de ancho y color azul en la parte superior, un borde punteado de 4 pixels de ancho y color rojo en la parte derecha, un borde con rayas de 6 pixels de ancho y color verde en la parte inferior y un borde doble de 8 pixels de ancho y color naranja en la parte izquierda del div.

Además, se utilizan las propiedades border-top-left-radius, border-top-right-radius, border-bottom-left-radius y border-bottom-right-radius para establecer radios de curvatura diferentes en cada esquina del borde.

En este caso, se establece un radio de curvatura de 25 pixels en la esquina superior izquierda, 50 pixels en la esquina superior derecha, 75 pixels en la esquina inferior izquierda y 100 pixels en la esquina inferior derecha.

El resultado final es un div con un borde azul sólido en la parte superior, un borde punteado rojo en la parte derecha, un borde con rayas verde en la parte inferior y un borde doble naranja en la parte izquierda, con radios de curvatura diferentes en cada esquina y con un espacio entre su contenido y su borde.

Es importante tener en cuenta que este es solo un ejemplo avanzado y que hay muchas más formas de personalizar los bordes utilizando CSS. Puedes jugar con diferentes combinaciones de estilos, anchos y colores, así como con diferentes radios de curvatura para lograr el diseño que desees.

Más ejemplos

Aquí te dejo algunos ejemplos de cómo utilizar la propiedad “border” en CSS:

  1. Ejemplo de borde sólido de 2px de ancho y color rojo:
div {
  border: 2px solid red;
}
Lenguaje del código: CSS (css)
  1. Ejemplo de borde punteado de 1px de ancho y color verde:
p {
  border: 1px dotted green;
}
Lenguaje del código: CSS (css)
  1. Ejemplo de borde múltiple, con un borde sólido de 2px de ancho y color azul en la parte superior e inferior, y un borde punteado de 1px de ancho y color negro en los lados derecho e izquierdo:
img {
  border-top: 2px solid blue;
  border-right: 1px dotted black;
  border-bottom: 2px solid blue;
  border-left: 1px dotted black;
}
Lenguaje del código: CSS (css)
  1. Ejemplo de borde redondeado, con un radio de 5px para las esquinas redondas:
button {
  border: 2px solid black;
  border-radius: 5px;
}
Lenguaje del código: CSS (css)
  1. Ejemplo de borde con imagen:
#miDiv {
  border: 30px;
  border-image: url("border-image.png") 30 30 round;
}
Lenguaje del código: CSS (css)

Espero que estos ejemplos te ayuden a entender mejor cómo utilizar la propiedad “border” en CSS.