El estilo de un sitio web de HTML está controlado por CSS, que también es una parte fundamental de HTML. Una de las propiedades de estilo proporcionadas por CSS es la "borde" propiedad. La mayoría de las bordes se crean fuera de los elementos, pero CSS nos permite insertar un borde dentro de un elemento con la ayuda de diferentes propiedades, que son la sombra de caja, el contorno y el tamaño de la caja.

En este artículo, aprenderemos el procedimiento para colocar fronteras dentro del DIV usando:

• propiedad de shadow de caja
• Esquema con propiedad de compensación de contorno
• propiedad de tamaño de caja

Entonces, comencemos!

Método 1: Coloque un borde dentro de un DIV utilizando la propiedad de "Shadow de caja"

Podemos colocar un borde dentro del Div usando el "sombra de la caja" propiedad. Entonces, primero, pase por la propiedad de la bandeja y su funcionalidad.

¿Qué es la propiedad "Box-Shadow"??

En CSS, el "sombra de la caja"La propiedad nos permite establecer una sombra en cualquier elemento o imagen. Esta propiedad se basa en los siguientes valores:

• offset-x: Se usa para agregar sombra horizontal.
• offset-y: Se usa para agregar sombra vertical.
• color: Se utiliza para colocar el color de la sombra.

Sintaxis

Para aclarar estos puntos, pasemos a la sintaxis de la propiedad de la bandeja de caja:

Shadow de caja: Offset-X offset-y blur-radius se extiende el color de color;

Aquí está la descripción relacionada con los valores mencionados anteriormente:

• "offset-x" y "compensación"Puede ser positivo o negativo.
• "borde"Hace que la sombra sea más brillante o más ligera.
• Mediante el uso "desparramar", Puedes establecer el tamaño de la sombra.
• En lugar de "color", Asignará cualquier color que desee dar a la imagen.
• "recuadro"Se usa para establecer la sombra dentro del elemento. Si no lo usa, aparecerá una sombra fuera de la caja.

Nota: "borde","desparramar", y "recuadro"Son los valores opcionales de la propiedad de la bandeja de caja. Puede usar estos valores en algunos casos especiales.

Para obtener una mejor comprensión del uso de la propiedad de la cámaras de la caja, implementemos un ejemplo práctico.

Ejemplo

En la sección HTML, crearemos un contenedor usando la etiqueta y el encabezado

dentro de eso.

Html

"Border sólido dentro del div"

A continuación, en el archivo CSS, usaremos "div"Para acceder al Div ya creado y colocar el borde dentro de él al seguir las instrucciones dadas:

• Establezca el ancho y la altura del Div como "700px" y "250px".
• Especifique el color del texto como "RGB (13, 214, 214)".
• Establezca los valores para la alineación del texto utilizando la propiedad de altura de línea de línea como "200px"Y la propiedad de alineación de texto como"centro".
• Mediante el uso de la propiedad de fondo, establezca el color de fondo del DIV como "negro".
• Crear un borde usando la propiedad fronteriza con "15px" ancho, "sólido"Forma, y"negro" color.
• Para la sombra interior, usa el "sombra de la caja"Propiedad y establecer el valor de Offset-X, Offset-y, y desenfoque como"0px", Extendiéndose como"5px", El color de la sombra como"RGB (255, 251, 0)" y use "recuadro"Para colocar la frontera dentro del Div.

CSS

div
Ancho: 700px;
Altura: 250px;
Color: RGB (255, 238, 0);
Línea de altura: 200px;
Text-Align: Center;
Fondo: negro;
borde: 15px negro sólido;
Shadow de caja: 0px 0px 0px 5px RGB (255, 238, 0) recuadro;

Nota: El valor de offset-x y offset-y se establece como 0 porque necesitamos bordes en todos los lados del div.

Después de implementar el código dado, vaya al archivo HTML y ejecútelo para ver el siguiente resultado:

Nota: Al aumentar el valor del "desparramar", Puedes aumentar el ancho de la frontera.

Método 2: Coloque un borde dentro de un DIV usando la propiedad "Esquema" y "Outline-Offset"

El "describirLa propiedad se usa para establecer la línea fuera del elemento. Es la propiedad abreviada de "ancho de contorno","estilo de esquema", y "color de esquema". La sintaxis de la propiedad de esquema es la siguiente:

Esquema: color de esquema de estilo de esquema de ancho de esquema

Aquí está la descripción relacionada con los valores mencionados anteriormente:

• ancho de esquema: Se usa para establecer el ancho del esquema.
• estilo de esquema: Se usa para establecer el estilo del esquema.
• color de esquema: Se utiliza para especificar el color de esquema.

Del mismo modo, el "compensación de esquemaLa propiedad se utiliza para establecer el espacio entre el borde del elemento y el contorno. Este espacio es transparente. La sintaxis de la propiedad de compensación de esquema es:

Outline-offset: valor

En el lugar de valor, puede establecer el espacio que desea establecer entre el borde del elemento y el esquema. Crea un contorno dentro del elemento cuando se especifica un valor negativo.

Pasemos al ejemplo de crear un borde dentro del div.

Ejemplo

En este ejemplo, crearemos dos divs con nombres de clase "div1" y "div2"Y agregue un rumbo dentro de él usando

etiqueta.

Html

"Border de la cresta dentro del Div"

"Doble borde dentro del div"

En CSS, usa "div1"Para acceder al contenedor que hemos creado en el archivo HTML. Para insertar el borde dentro del DIV, siga las instrucciones dadas:

• Establezca el ancho y la altura del Div como "500px".
• Ajuste el radio del borde a "50%".
• Establezca el color del texto como "RGB (13, 214, 214)".
• Establezca los valores para la alineación del texto utilizando la propiedad de altura de línea de línea como "500px"Y la propiedad de alineación de texto como"centro".
• Mediante el uso de la propiedad de fondo, establezca el color de fondo del DIV como "negro".
• Crear una frontera usando la propiedad fronteriza como "15px","sólido", y "negro".
• Para el borde interior, use el "describir"Propiedad y establecer el valor como"10px","cresta", y "RGB (0, 255, 242)"Y establecer el valor de"compensación de esquema" como "-25px"Para colocar la frontera dentro del Div.

CSS

.Div1
Ancho: 500px;
Altura: 500px;
Radio fronterizo: 50%;
Color: RGB (13, 214, 214);
Línea de altura: 500px;
Text-Align: Center;
Fondo: negro;
Esquema: 10px Ridge RGB (0, 255, 242);
Outline -Offset: -25px;

Para el estilo del segundo div, solo cambie el estilo del esquema utilizando el "describir"Propiedad y establecer los valores de la siguiente manera:

Esquema: 10px doble RGB (0, 255, 242);

Método 3: Coloque un borde dentro de un DIV utilizando la propiedad de "tamaño de caja"

CSS "dimensionador"La propiedad calcula el ancho y la altura del elemento. La sintaxis de la propiedad del tamaño de la caja es:

dimensionamiento de la caja: valor

En el lugar de valor, puede establecer el valor del tamaño de la caja como "buzón de contenido" y "caja de fronteras".

Ejemplo

En el siguiente ejemplo dado, crearemos un nombre de clase Div "div1"Y agregue un rumbo dentro de él.

Html

"Border de ranura dentro del Div"

En el CSS, usaremos "div1"Para acceder al Div creado. A continuación, inserte el borde dentro del Div de la siguiente manera:

• Establezca el ancho y la altura del Div como "550px".
• Establezca el color del texto como "RGB (2, 255, 137)".
• Establezca los valores para la alineación del texto utilizando la propiedad Line-Al-Weight como "420px"Y la propiedad de alineación de texto como"centro".
• Mediante el uso de la propiedad de fondo, establezca el color de fondo del DIV como "negro".
• Cree un borde utilizando propiedades fronterizas como "50px","ranura", y "RGB (81, 255, 0)".
• A continuación, usa el "borde"Propiedad y establecer el valor como"50px","ranura", y "RGB (81, 255, 0)"Y establecer el valor de"dimensionador" como "caja de fronteras"Para colocar la frontera dentro del Div.

.Div1
Ancho: 550px;
Altura: 550px;
Color: RGB (2, 255, 137);
Línea de altura: 420px;
Text-Align: Center;
Fondo: negro;
borde: 30px Groove RGB (81, 255, 0);
dimensionamiento de la caja: border-box;

Después de implementar el código dado, verá la siguiente salida:

Hemos proporcionado las tres formas más fáciles de colocar un borde dentro de un DIV usando CSS.

Conclusión

Para colocar un borde dentro del div, primero, cree un borde usando el "borde"Propiedad, luego use el"sombra de la caja" y "describir" con "compensación de esquema" y "dimensionador"Propiedades de CSS. La propiedad fronteriza crea un borde alrededor del elemento, y las otras cuatro propiedades se pueden usar para mover el borde dentro del div. Como resultado de este artículo, le hemos mostrado los tres métodos más fáciles para colocar las fronteras dentro del div.
Para colocar un borde dentro del div, primero, cree un borde usando el "borde"Propiedad, luego use el"sombra de la caja" y "describir" con "compensación de esquema" y "dimensionador"Propiedades de CSS. La propiedad fronteriza crea un borde alrededor del elemento, y las otras cuatro propiedades se pueden usar para mover el borde dentro del div. Como resultado de este artículo, le hemos mostrado los tres métodos más fáciles para colocar las fronteras dentro del div.