Establecer borde interior en CSS

1. Utilice la propiedad box-sizing para establecer el borde interior en CSS
2. Utilice la propiedad box-shadow para establecer el borde interior en CSS
3. Utilice las propiedades outline y outline-offset para establecer el borde interior en CSS

En este artículo, presentaremos métodos para establecer bordes dentro de un contenedor en CSS. El borde interior de un contenedor se llama borde interior.

Utilice la propiedad box-sizing para establecer el borde interior en CSS

Cuando agregamos un borde o relleno a un elemento dentro de un contenedor, el tamaño del contenedor aumentará. El tamaño será diferente al inicial. Para eliminar el problema, podemos agregar un borde interior al contenedor.

El borde interior es un espacio creado entre el borde y la propiedad o elemento de contorno. Podemos aplicar un borde interior al contenido de la tabla, las imágenes y el texto de los párrafos y encabezados. Un borde interior puede tener cualquier forma, como rectangular, cuadrado, circular, etc.

El borde interior no aumentará el tamaño del contenedor y el tamaño predefinido será constante. Podemos usar la propiedad box-sizing para crear un borde interior en CSS. Establecer la propiedad box-sizing en border-box incluirá el borde y el relleno dentro de la dimensión del contenedor.

Por ejemplo, aplique estilo a un div estableciendo la propiedad box-sizing en border-box. Establezca la altura y el ancho de div en 200px. A continuación, cree un borde sólido de 10px de ancho y color rojo. Luego, establezca la propiedad background en green.

Aquí, hemos creado un div con dimensiones de 200x200 px. Incluso si agregamos un borde de 10px, la dimensión del contenedor no cambió. El borde se encuentra dentro del contenedor. Por lo tanto, podemos usar la propiedad box-sizing para establecer el borde interior en CSS.

Código de ejemplo:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid red;
    background: green;
}

<div></div>

Utilice la propiedad box-shadow para establecer el borde interior en CSS

Otra forma de conseguir el borde interior es utilizar la propiedad CSS box-shadow. Usando la propiedad, podemos especificar la sombra insertada que se vería como un borde interior en lugar de una sombra.

Podemos establecer los valores de compensación horizontal y vertical para box-shadow como los dos primeros valores. Los otros tres valores, desenfoque, extensión y color, son opcionales. Podemos establecer el radio de propagación en el valor deseado para crear una sombra. Luego, el uso de la opción inset cambiará la sombra exterior a la sombra interior. La sombra caerá dentro del recipiente. Finalmente, parece un borde interior.

Por ejemplo, establezca las propiedades height y width de div como 200px. Establezca el color de fondo en verde. Luego, use la propiedad box-shadow y establezca las tres primeras opciones en 0px. Establezca el radio de extensión, la cuarta opción en 10px. Dar el color rojo y configurar la opción inset.

Aquí, creamos un borde interior con el ancho de 10px usando la propiedad box-shadow.

Código de ejemplo:

div {
    width:200px;
    height:200px;
    background-color:green;
    box-shadow:0px 0px 0px 10px red inset;
}

<div></div>

Utilice las propiedades outline y outline-offset para establecer el borde interior en CSS

Podemos establecer el borde interior usando las propiedades outline y outline-offset en CSS. La propiedad outline describe el tamaño del borde del elemento, el tipo de borde y el color del borde. La propiedad outline-offset describe la distancia o el espacio entre el borde y el elemento de contorno.

Por ejemplo, establezca la altura y el ancho de div en 200px. Dale color verde como fondo. A continuación, establezca outline como 5px solid red. Luego, establezca outline-offset en -5px.

Aquí, la propiedad outline crea un borde exterior en el contenedor. El uso de la propiedad outline-offset y la configuración del valor negativo del ancho del borde cambiará el borde exterior al borde interior.

Código de ejemplo:

div {
    width: 200px;
    height: 200px;
    background: green;
    outline: 5px solid red;
    outline-offset: -5px;
}

<div></div>