Tamaño del borde de CSS
Ejemplo 01: Uso de la etiqueta de estilo CSS para cambiar el tamaño de un borde en un archivo HTML
En este ejemplo, alteraremos el tamaño de un borde de un contenedor Div utilizando CSS en la etiqueta de la cabeza en un archivo HTML. Definiremos una función universal para todos los contenedores DIV que se crearán en este archivo para tener el estilo de edición predefinido que definiremos en la sección Div presente en la etiqueta de estilo. Entonces, para lograr esta tarea, generaremos el siguiente script:
Como podemos ver en el script anterior de un archivo HTML, hemos abierto una etiqueta de estilo en la que se llama un DIV que tiene varias propiedades definidas una por una. Primero es el relleno, que le dará al contenedor DIV un espacio entre la página del navegador y las fronteras. Luego hemos llamado a la propiedad fronteriza en sí y, en esta propiedad, definiremos el tamaño del borde y el tipo de borde; En nuestro caso, se establece en "1px" y "Solid."Luego agregamos kits web que admitirán los navegadores más utilizados en la misma función de propiedad. Luego cerramos el estilo y la etiqueta de la cabeza y abrimos la etiqueta del cuerpo. En esta etiqueta, hemos mencionado todo lo que estará presente en la página una vez que este archivo se abra en un navegador.
Hemos agregado un encabezado usando la etiqueta "H2" y también agregamos un contenedor DIV con algún texto. Este contenedor Div heredará todas las propiedades definidas en la etiqueta de estilo, que está presente en el encabezado del archivo. Estas etiquetas estarán cerradas después de esto. Y ahora, guardaremos este archivo en el ".Formato HTML "y ábralo en el navegador para ver la siguiente salida:
Como podemos ver en la salida anterior, el encabezado y el contenedor Div están presentes, y el borde del contenedor también se muestra con un tamaño delgado junto con algún texto en él.
Ahora editaremos el script anterior y realizaremos cambios en el tamaño del borde en la etiqueta de estilo de la sección del encabezado para visualizar la diferencia entre el tamaño del borde del contenedor.
Ajustamos el tamaño de "1px" a "5px" en el script anterior para generar un borde más grueso para el contenedor. Observemos ahora cómo aparece este cambio en nuestro navegador cuando ejecutamos el script.
Como podemos ver en la salida anterior, el tamaño del borde ahora es grueso en comparación con la salida anterior.
Ejemplo # 02: Crear una clase en la etiqueta de estilo CSS para controlar el tamaño de un borde en un archivo HTML
En este ejemplo, crearemos una clase especial de estilo CSS en la que definiremos todos los aspectos del estilo que queremos a lo largo del archivo. Este es un método muy útil porque podemos distinguir diferentes diseños en un solo archivo HTML y clasificarlos en diferentes clases. En este ejemplo, clasificaremos el estilo de un borde de cualquier contenedor. Para lograr eso, escribiremos el siguiente script:
Como podemos ver en este script, hemos abierto una etiqueta de estilo en el encabezado del archivo HTML. En esta etiqueta de estilo, hemos creado una clase para el estilo de la etiqueta del párrafo en el que hemos definido dos propiedades para el borde, que son estilo y ancho. La propiedad de estilo se establece en sólida, lo que significa que el borde será uniforme, línea recta, y la propiedad de ancho se establece en adelgazamiento, lo que significa que el tamaño del borde será delgado. Después de esto, cerramos el estilo y la etiqueta de la cabeza y nos movimos hacia la etiqueta del cuerpo. En la etiqueta del cuerpo, hemos dado un encabezado y un párrafo a la página HTML. En la etiqueta del párrafo, hemos llamado la "P.clase BW1 ”, que tiene las propiedades fronterizas predefinidas en ella. Cerraremos las etiquetas y guardaremos este archivo para que podamos ejecutar esto en nuestro navegador.
Después de ejecutar este script en nuestro navegador, obtendremos la salida anterior. Como podemos ver, la clase de estilo para la etiqueta del párrafo ha agregado un borde sólido y delgado al párrafo presente en el cuerpo.
Ahora variaremos el tamaño del borde presente en el script anterior y observaremos el efecto de estas variaciones en el borde.
En esta situación, hemos editado el ancho de delgado a medio, y después de ejecutar este script, obtendremos la siguiente salida:
En esta salida, el tamaño del borde ha cambiado de delgado a medio y ahora es mucho más visible. Después de esto, cambiaremos el tamaño de medio a grueso, como se muestra en el script a continuación:
Después de ejecutar este script, obtendremos la siguiente salida:
Después de cambiar el ancho en grueso, podemos ver que el borde es muy amplio en tamaño y fácilmente visible.
Ejemplo # 03: Uso de la hoja de estilo CSS CSS para alterar el tamaño del borde usando la clase de borde
En este ejemplo, usaremos la hoja de estilo CSS de viento de cola para cambiar el tamaño de un borde utilizando una clase de borde definida en esta hoja de estilo. La clase de borde tiene varios tamaños predefinidos para el borde, que exploraremos en este ejemplo implementando esto en el bloc de notas++.
En el script anterior, agregaremos el enlace a la hoja de estilo CSS Tailwind usando la etiqueta de enlace en el encabezado del archivo. Luego abriremos la etiqueta del cuerpo y le daremos un rumbo. Luego abriremos la etiqueta Div, que llamaremos la clase de Border-2 con el código de color del borde, y luego la etiqueta del párrafo tendrá el texto del cuerpo del contenedor Div encerrado en él. Ahora guardaremos este archivo y lo abriremos en nuestro navegador para ver cómo resulta el borde.
Como podemos ver que el tamaño del borde es muy delgado y se puede ajustar a un tamaño más grande, por lo que aumentaremos el tamaño llamando a la clase Border-8 y veremos cómo cambia el tamaño del borde.
Como podemos ver en el fragmento anterior, el borde ahora es más grueso que antes debido a la clase Border-8.
Conclusión
En este artículo, nos centramos en el atributo de "tamaño" CSS de un borde. El tamaño del borde se especifica comúnmente con dos identificadores: píxeles y representación textual, como "delgada", "mediana" y "gruesa."Discutimos varios métodos para alterar el tamaño del borde utilizando CSS en un archivo HTML en este artículo. Utilizamos el entorno Notepad ++ para editar nuestro archivo HTML e implementamos los métodos de estilo de estilo CSS convencionales para alterar el tamaño de un borde. También utilizamos la hoja de estilo CS CS para llamar a sus clases de borde que proporcionaron diferentes tamaños para el borde de un contenedor y se puede llamar a través de un estilo CSS en línea.