CSS Border-Left Property

La izquierda fronteriza significa que colocamos el borde en el lado izquierdo de cualquier párrafo o cualquier encabezado en CSS. CSS nos proporciona la propiedad incorporada de la izquierda fronteriza. Al usar esta propiedad, colocamos el borde en el lado izquierdo. Cuando usamos esta propiedad en CSS, el borde aparecerá solo en el lado izquierdo del párrafo o encabezado. Podemos establecer el tipo, el ancho y el color del borde en esta propiedad de "borde-izquierda". Tenemos diferentes propiedades disponibles en CSS como "estilo fronterizo", "ancho de la izquierda fronteriza" y "color-izquierda fronteriza". En lugar de usar todas estas propiedades, solo usamos la propiedad de la izquierda fronteriza y establecemos todo el ancho, el estilo y el color en esta propiedad. En otras palabras, podemos decir que es la propiedad abreviada de todas estas propiedades.

En esta guía, utilizaremos esta propiedad y realizaremos diferentes ejemplos en los que usamos esta propiedad "Border-izquierda" en CSS.

Ejemplo 1
Cree el archivo en el código de Visual Studio y elija el idioma HTML para crear el archivo HTML. Debemos usar este archivo para escribir párrafos y aplicar la propiedad de la izquierda fronteriza en los párrafos. También debemos vincular nuestro archivo HTML al archivo CSS para que todo el estilo que hagamos en el archivo CSS se aplicará a él.

Creamos dos párrafos en este código HTML y los llamamos "P1" y "P2". Establecemos estos nombres porque debemos diseñar estos párrafos por separado en CSS. Estos nombres ayudarán cuando les apliquemos el estilo.

Código CSS:
Para peinar el párrafo uno, usamos el nombre "P1". Aquí, usamos las propiedades separadas para establecer el borde en el lado izquierdo del párrafo. Primero, establecemos el "ancho de la izquierda fronteriza" en "10px" para establecer el ancho del borde. Luego, fijamos el "color-color de la frontera" en "magenta". Establece el color del borde izquierdo del párrafo. También establecemos el "estilo de la izquierda fronteriza" en "sólido". Esto significa que el tipo de borde es "sólido". Después de esto, establecemos el "color de fondo" de "P1" en "Light-Green". Aumente el "tamaño de la fuente" y configúrelo en "25px", y alinee "P1" en el centro. Ahora, viene "P2", en lugar de usar todas las propiedades del ancho, estilo y color de la izquierda fronteriza, solo usamos una propiedad que es la propiedad "fronteriza". Establecemos los tres estilos en esta propiedad. Usamos el mismo estilo, ancho y color que usamos para "P1". El color de fondo, el tamaño de la fuente y el alineado de texto también son los mismos que en el "P1".

Producción:

En la salida, no hay diferencia entre el párrafo "P1" y el párrafo "P2". Entonces, en lugar de usar propiedades separadas, damos prioridad a la propiedad que es la propiedad "fronteriza".

Ejemplo #2
Creamos un encabezado y una clase "div" con el nombre de "borde" y escribimos una línea dentro de esta "div". Ahora, debemos aplicar la propiedad de la izquierda fronteriza en la "div" proporcionada por el CSS.

Código CSS:
Para el encabezado, simplemente cambiamos el color de fondo a "rosa" y luego pasamos a la clase Div llamada "Border". Aplicamos las diferentes propiedades. El ancho de este Div "Border" es "100%" y la altura es "200px". El color de su fondo es "azul claro cielo". Después de esto, usamos el "borde-izquierda" y establecemos el "4px" para el ancho del borde izquierdo. Este borde está configurado en "Dable" en tipo. Y el color de este borde izquierdo está establecido en "rojo".

Producción:
Aquí, vemos que nuestro fondo de encabezado parece ser "rosa" y no hay borde para este encabezado. Entonces, tenemos una línea que hemos escrito en el "Div". Aquí está el borde izquierdo de esta línea. El borde aparece como "rojo" en color y está punteado. Seleccionamos estos colores y estilos en nuestro código CSS.

Ejemplo #3
Usamos el mismo código HTML que hemos escrito en nuestro ejemplo anterior. Aquí, en CSS, establecemos el color de "coral ligero" para el fondo del encabezado. La "familia de fuentes" utilizada para esto es "argelino". Utilizamos el nombre "Div" "Border" y establecemos su ancho en "110%" y su altura a "210px". El color de su fondo es "naranja". Aquí tenemos la propiedad "fronteriza". En esta propiedad, el ancho del borde que aparece en el lado izquierdo se establece en "8px". El tipo de borde que establecemos aquí es "sólido". Tenemos que configurar el color para este borde, por lo que lo establecemos en "naranja".

Producción:
La salida muestra el borde del lado izquierdo en color verde y el ancho de este borde es "8px". Establecimos este borde con la ayuda de la propiedad "fronteriza".

Ejemplo #4
Aquí, el fondo del rumbo es "granate", la "familia de fuentes" es "Times New Roman" y el color de la "fuente" es "blanco". Ahora viene "div". Establecimos su "ancho" y "altura" en "120%" y "220px", respectivamente. El color del fondo para esto está establecido en "Light-Green". Nuevamente, usamos la propiedad "fronterizo-izquierda", y esta vez, establecemos el tipo en "duplicar". Este "doble" aparecerá como "doble línea" en el lado izquierdo. El color de este doble borde es "negro" y es "9px" en "ancho".

Producción:

Ejemplo #5
Aquí tenemos un encabezado, un párrafo y un div. Usaremos los diferentes tipos de borde en el lado izquierdo de todos estos utilizando la propiedad incorporada CSS.

Código CSS:
Para el encabezado, el tipo de borde-izquierda es "sólido", "5px" en ancho, y está configurado en color "verde" en color. Para los párrafos, usamos el "borde-izquierda" nuevamente. Esta vez, el tipo de este borde es "punteado" y el color es "azul". El "peso de fuente" del párrafo es "audaz" y el tamaño de la fuente del párrafo es "20px". También tenemos un "div" en el que establecemos el tipo de borde izquierdo como "punteado", "4px" y "rojo" para el "ancho" y "color", respectivamente.

Producción:
El borde izquierdo del encabezado, el párrafo y el div en diferentes tipos. El rumbo en el borde izquierdo es verde sólido. El border izquierdo del párrafo está en un tipo punteado y color azul. El borde izquierdo de div está en doble tipo y el color de esto parece ser "rojo".

Ejemplo #6
En nuestro último ejemplo, creamos el "encabezado", "div", "párrafo" y "span". Usamos las diferentes fronteras en todos estos. Aplicamos el borde izquierdo sobre ellos.

Código CSS:
Para el encabezado, aplicamos el "estilo de la izquierda fronteriza" que está "punteado". El "estilo de fuente" para esto es "cursiva" y el color del fondo es "azul claro". Ahora viene "div". El borde completo para esto es el tipo "punteado" y el "borde-izquierda" es "5px" en su ancho, "sólido" en su tipo y "granate" en su color. El fondo de "Div" está configurado como "Pink", "20px" en tamaño, y alineado en el "Centro". Después de esto, aplicamos el "borde-izquierda" al ancho "6px", el tipo "sólido" y el color "magenta". El color de fondo de este párrafo es "verde claro". El "tamaño de fuente" que usamos aquí es "25px" y está alineado en el "centro". Ahora, aplicamos la propiedad "fronterizo-izquierda" que se usa para "span" y establecemos el ancho, el tipo y el color de esta "izquierda fronteriza" a "9px", "doble" tipo y "amarillo". Su "tamaño de fuente" es "27px" y el texto está alineado en el "centro".

Producción:
En esta salida, hay diferentes bordes izquierdos para todos estos. Aplicamos los tres estilos de la izquierda fronteriza aquí que están "salpicadas", "sólidas" y "dobles".

Conclusión

Esta guía exploró el concepto de propiedad "fronteriza" en CSS. Después de leer esta guía, supimos que esta propiedad es la propiedad abreviada de tres propiedades. Utilizamos solo una propiedad en lugar de usar las tres propiedades: "ancho de la izquierda fronteriza", "al estilo de la izquierda fronteriza" y "color de la izquierda fronteriza" -ECURANTE. Aquí, exploramos los seis ejemplos diferentes y explicamos cada ejemplo en esta guía, proporcionado con la captura de pantalla de las salidas de esos códigos. Ahora, después de estudiar esta guía, podrá usar esta propiedad en sus proyectos o sitios web.