Cómo establecer un borde interior en CSS

Los bordes son una parte importante del diseño web. A través de ellos se pueden separar visualmente diferentes elementos de una página, delimitar áreas y resaltar contenido importante. Uno de los tipos de borde que se pueden crear con CSS es el borde interior, que se utiliza para delimitar el interior de un elemento.

En este artículo aprenderás a establecer un borde interior en CSS. Te explicaremos qué es un borde interior, cómo se crea con CSS, cuáles son sus propiedades y cómo se aplican estas propiedades para crear diferentes efectos.

📋 Aquí podrás encontrar✍

¿Qué es un borde interior?
Cómo crear un borde interior en CSS
1. Seleccionar el elemento
2. Establecer las propiedades de borde
Cómo aplicar propiedades de borde para crear diferentes efectos
Conclusión
Preguntas frecuentes

¿Qué es un borde interior?

Un borde interior es un borde que se coloca en el interior de un elemento HTML. Este borde delimita el espacio que se encuentra dentro del elemento, sin afectar la posición o el tamaño del elemento en sí.

Un borde interior se puede crear con CSS utilizando la propiedad border y sus subpropiedades (border-style, border-width y border-color). Estas propiedades también se pueden escribir en una sola línea como border: style width color.

Cómo crear un borde interior en CSS

Para crear un borde interior en CSS primero debes seleccionar el elemento HTML en el que lo quieres aplicar, ya sea mediante un ID, una clase o un selector. Una vez seleccionado el elemento, debes establecer las propiedades de borde.

Seleccionar el elemento

Para seleccionar el elemento HTML en el que quieres aplicar un borde interior en CSS, puedes utilizar un ID, una clase o un selector. Por ejemplo, si quieres aplicar un borde interior a un div con ID "container", utilizarías la siguiente regla CSS:

#container {
border: 1px solid black;
}

Esta regla establecería un borde interior de 1 píxel de ancho y de color negro para el div con ID "container".

Establecer las propiedades de borde

Una vez seleccionado el elemento, debes establecer las propiedades de borde para crear el borde interior. Las propiedades de borde que se utilizan para crear un borde interior son:

border-style: establece el estilo del borde (solid, dotted, dashed, double, groove, inset, outset, ridge).
border-width: establece el ancho del borde en píxeles, em o porcentaje.
border-color: establece el color del borde (en nombres de color, códigos hexadecimales o valores RGB).

En la siguiente regla CSS se establecen estas propiedades para crear un borde interior de estilo dashed (rayado), de 2 píxeles de ancho y de color rojo para un div con clase "box":

.box {
border: dashed 2px red;
}

Recuerda que también puedes establecer estas propiedades por separado utilizando las subpropiedades border-style, border-width y border-color.

Cómo aplicar propiedades de borde para crear diferentes efectos

Existen varias propiedades de borde que se pueden utilizar para crear diferentes efectos visuales con el borde interior. Algunas de estas propiedades son:

border-radius: establece la curvatura de las esquinas del borde interior, creando un efecto de redondez.
box-shadow: crea una sombra alrededor del borde interior, añadiendo profundidad y dimensión.
border-image: establece una imagen como borde interior, creando un efecto de textura o patrón.

En la siguiente regla CSS se utiliza la propiedad border-radius para crear un borde interior redondeado de 10 píxeles de radio en un div con ID "round-box":

#round-box {
border: 2px solid black;
border-radius: 10px;
}

También se puede utilizar la propiedad box-shadow para crear un borde interior con sombra:

.shadow-box {
border: 2px solid black;
box-shadow: 2px 2px 10px grey;
}

Esta regla crearía un borde interior con una sombra de 2 píxeles de distancia horizontal, 2 píxeles de distancia vertical y 10 píxeles de difuminado en color gris.

Conclusión

Los bordes interiores son una herramienta útil para el diseño web, permitiendo delimitar visualmente el espacio de un elemento HTML sin afectar su posición o tamaño. Con CSS se pueden crear diferentes efectos de borde interior utilizando propiedades como border-style, border-width, border-color, border-radius, box-shadow y border-image.

Experimenta con estas propiedades en tus diseños web para crear bordes originales y llamativos que resalten el contenido de tu página.

Preguntas frecuentes

¿Cómo puedo aplicar diferentes estilos de borde interior en un mismo elemento?

Para aplicar diferentes estilos de borde interior en un mismo elemento, se pueden utilizar las propiedades border-top-style, border-right-style, border-bottom-style y border-left-style para establecer el estilo de cada uno de los cuatro lados del borde interior. De esta manera, puedes por ejemplo crear un borde interior con un estilo sólido en los lados izquierdo y derecho, y con un estilo de puntos en los lados superior e inferior.

¿Puedo utilizar imágenes como borde interior?

Sí, utilizando la propiedad border-image se pueden establecer imágenes como borde interior. Esta propiedad permite especificar una imagen en lugar de un color para el borde interior, también se pueden ajustar diferentes propiedades de la imagen como la posición, el tamaño, la repetición y la sección.

¿Cómo puedo crear un borde interior con efecto de relieve?

Para crear un borde interior con efecto de relieve se puede utilizar la propiedad box-shadow en conjunto con un borde sólido y un color ligeramente más claro que el fondo del elemento. De esta manera se crea la ilusión de que el borde interior está elevado o resaltado. Por ejemplo:

.relief-box {
border: 2px solid #aaa;
border-radius: 10px;
box-shadow: 2px 2px 5px #eee inset;
}

Esta regla CSS crearía un borde interior con efecto de relieve en un elemento con clase "relief-box".