En html, para dibujar o colocar bordes dentro de un recipiente Div, existe un método simple. Los usuarios pueden utilizar el CSS "borde"Propiedad y muévala dentro de la caja del elemento usando el CSS"sombra de la caja"Propiedad con un valor de recuadro y establecer el valor. Además, "tamaño de caja"Se utiliza para definir el tamaño del cuadro y el valor"caja de fronteras"Incluye relleno y borde en el ancho y la altura del elemento.

Esta publicación explicará el procedimiento para colocar el borde dentro del div y no en su borde.

Cómo colocar el borde dentro de Div y no en su borde?

Para colocar el borde dentro del div y no en su borde, pruebe el procedimiento mencionado.

Paso 1: Insertar encabezado

Primero, agregue un encabezado con la ayuda de una etiqueta de encabezado de "

" a "

". Para hacerlo, el

Se utiliza la etiqueta:

Linuxhint Ltd UK

Paso 2: Hacer contenedor Div

A continuación, utilice el ""Etiqueta para hacer un contenedor. Además, inserte el atributo de clase dentro de la etiqueta de apertura del div. Los usuarios también pueden agregar múltiples atributos de clase en el contenedor DIV único asignando nombres a un atributo de clase. Por ejemplo, estableceremos tres nombres de clase diferentes en un contenedor "caja","círculo", y "borde":

Paso 3: encabezado de estilo

Luego, acceda al encabezado y aplique diferentes propiedades CSS para el estilo:

H1
estilo de fuente: cursiva;
color azul;

Aquí:

• "Estilo de fuente"La propiedad especifica el estilo de fuente como"itálico".
• "color"Se utiliza para establecer el color de encabezado como"azul".

Paso 4: Clase de estilo "Box"

Ahora, acceda al ".caja"Clase usando el selector de puntos. Luego, aplique las siguientes propiedades CSS:

.caja
Altura: 160px;
Ancho: 160px;
Antecedentes: RGB (161, 229, 250);
margen: 20px 50px;

Según el fragmento de código dado:

• "altura"Define el tamaño del elemento verticalmente.
• "ancho"La propiedad asigna un ancho específico al elemento.
• "fondo"La propiedad establece un color específico en el fondo del elemento.
• "margen"Define espacios alrededor del elemento.

Producción

Paso 5: Clase de estilo "Border"

Utilizar el ".borde"Para acceder a la segunda clase y aplicar propiedades que se enumeran a continuación:

.borde
borde: 20px sólido RGB (161, 229, 250);
dimensionamiento de la caja: border-box;
Shadow de caja: recuadro 0px 0px 0px 12px RGB (15, 15, 15);

Aquí:

• "bordeLa propiedad define un límite fuera del elemento.
• "tamaño de caja"Se utiliza para definir el tamaño de la caja y el valor"caja de fronteras"Incluye relleno y borde en el ancho y la altura del elemento.
• "sombra de la caja"La propiedad inserta una sombra fuera de un elemento. Para hacerlo, el "recuadro"El valor se establece con un color específico como"RGB (15, 15, 15)".

Producción

Paso 6: Clase de estilo "Círculo"

Acceder a la tercera clase usando su ".círculo":

.círculo
Radio fronterizo: 50%;

Luego, aplique el "radio fronterizo"Propiedad para hacer la curva de todos los lados. Más específicamente, se utilizará para hacer que la esquina del borde exterior redondee en forma de elemento. Los usuarios pueden crear esquinas circulares con la ayuda de un solo radio o esquinas elípticas con dos radios.

Producción

Eso se trataba de colocar el borde dentro del div y no en su borde.

Conclusión

Para colocar el borde dentro del div y no en su borde, primero cree un contenedor Div con la ayuda de "". A continuación, agregue un borde usando el "borde"Propiedad y utilizar"dimensionador"Para definir el tamaño de la caja. Su valor incluye un borde y relleno en el ancho y la altura del elemento. Después de eso, utilice el "sombra de la cajaPropiedad que inserta una sombra fuera de un elemento. Este artículo demostró el procedimiento para colocar el borde dentro de un DIV pero no en su borde.