Lados de borde en CSS
- Estilizar lados de borde individuales en CSS
- Estilizar múltiples lados de borde en CSS
Cómo diseñar los lados del borde en CSS
Esta sección contiene el uso de la propiedad lateral de las fronteras en varios escenarios.
Cómo diseñar un lado de borde en CSS
Esta sección practica las propiedades llamadas al estilo fronterizo, al estilo fronterizo, al estilo de la frontera y al estilo de la frontera.
border-top-style: valor; // para peinar el borde superiorBorder-Right-Style: Value; // Para peinar el borde derecho
Border-Bottom-Style: valor; // para estilo borde inferior
estilo fronterizo-izquierda: valor; // para peinar el borde izquierdo
El valor de las propiedades anteriores puede ser salpicada, discontinua, sólida, doble, ranura, etc.,
El código que se proporciona a continuación utiliza las propiedades declaradas anteriormente.
la propiedad de estilo fronterizo
la propiedad de estilo fronterizo
la propiedad de estilo de fondo fronterizo
la propiedad al estilo de la izquierda fronteriza
El código se explica como,
- Se crean cuatro clases de CSS llamada "Top", "Right", "Bottom" e "Izquierda"
- Cada clase está asociada con diferentes propiedades como la clase "superior" utiliza la propiedad de estilo fronterizo, etc.
- Estas clases de CSS se integran en cuatro párrafos diferentes
Producción:
Cómo establecer el mismo estilo para todos los lados de borde
Tendría que mencionar solo un patrón de estilo en la propiedad de estilo fronterizo de CSS. Para facilitar, hemos escrito sintaxis de esta propiedad específica de los lados de la frontera:
estilo borde: valor;El siguiente código establece el estilo de cada lado del borde para sólido.
Bienvenido a Linuxhint
La imagen del código se proporciona a continuación:
Producción:
Cómo establecer el mismo estilo para los lados de borde opuestos
Para hacerlo, la siguiente sintaxis te ayudaría.
Border-Style: Value1 Value2;El valor1 cambiará el estilo de los bordes superior e inferior, mientras que el valor2 se refiere a la parte inferior izquierda y derecha.
El siguiente código practica esta propiedad de estilo de CSS:
Bienvenido a Linuxhint
Los bordes superior e inferior se diseñarían en sólidos, mientras que las fronteras derecha y izquierda serán salpicadas.
La imagen del código se proporciona a continuación:
Producción:
Cómo diseñar el borde usando tres valores
Si el número de valores es tres, entonces los valores 1 y tercero peinarían la parte superior e inferior, mientras que el segundo valor pertenece a los lados derecho/izquierdo.
Border-Style: Value1 Value2 Value3;Value1 para TOP, Value2 para Bottom y Value3 para estilos izquierdo/derecho en la parte inferior. El siguiente ejemplo usa la sintaxis anterior para diseñar tres lados de borde:
Bienvenido a Linuxhint
El código estiliza los bordes superior, derecha e inferior a sólidos, punteados y discontinuos respectivamente.
Producción:
Cómo establecer diferentes estilos para cada lado del borde
La siguiente sintaxis ayuda a cambiar el estilo de borde de cada lado.
Border-Style: Value1 Value2 Value3 Value4;El valor1 y el valor3 se refieren a los bordes superior e inferior, mientras que el valor2 y el valor4 son para la parte inferior izquierda y derecha.
El siguiente código practica para diseñar todos los lados de borde en CSS.
Bienvenido a Linuxhint
El código anterior cambia el estilo de la parte superior e inferior a sólido y punteado. Sin embargo, los bordes derecho e izquierdo serán diseñados discontinuos y sólidos respectivamente.
La imagen del código de arriba se proporciona a continuación:
Producción:
Conclusión
Los elementos en HTML se pueden encerrar en un borde y los lados del borde pueden manipularse utilizando las diversas propiedades de CSS. Este artículo proporciona la demostración de los lados fronterizos en CSS. Los lados del borde pueden ser discontinuos, punteados o sólidos. Puede establecer el mismo estilo para todos los bordes, diferentes estilos para todos los bordes o establecer el mismo estilo para la parte superior/inferior y derecha/izquierda. Para obtener mejores entendimientos, también hemos proporcionado los ejemplos que ilustran los escenarios anteriores.