CSS: propiedad de estilo de borde izquierdo

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de estilo de borde izquierdo

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada estilo de borde izquierdo Con sintaxis y ejemplos.

describir

La propiedad CSS border-left-style define el estilo de línea para el borde izquierdo de un cuadro.

sintaxis

La sintaxis de la propiedad CSS de estilo de borde izquierdo es:

border-left-style: value;

parámetro o parámetro

valor

El estilo de línea utilizado para el borde izquierdo. Puede ser uno de los siguientes:

valor describir
no cualquiera Sin bordes (este es el valor predeterminado)
div {estilo del borde izquierdo: ninguno;}
duro simple, recto, sólido
div {estilo del borde izquierdo: sólido;}
embellecido serie de puntos
div {borde-izquierda-estilo: punteado;}
linea punteada Serie de guiones
div {estilo del borde izquierdo: discontinuo;}
doble Dos líneas, sumando la cantidad de píxeles definidos por border-left-width
div {estilo del borde izquierdo: doble;}
ranura efecto de grabado
div {estilo del borde izquierdo: surco;}
cresta Parece que el borde está “saliendo” del aspecto 3D (frente a la ranura)
div {estilo del borde izquierdo: cresta;}
ilustración Apariencia incrustada
div {estilo del borde izquierdo: inserción;}
al principio Apariencia en relieve (a diferencia de la ilustración)
div {estilo del borde izquierdo: inicio;}
oculto el borde está oculto
div {estilo del borde izquierdo: oculto;}
heredar El elemento heredará el estilo del borde izquierdo de su elemento principal
div {estilo del borde izquierdo: heredar;}

notas

  • Dado que el valor predeterminado de CSS border-left-style es none, debe establecer el valor de CSS border-left-style para mostrar el borde izquierdo.
  • Consulte también las propiedades border-left-color, border-left-width y border-left.

Compatibilidad del navegador

La propiedad CSS border-left-style tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • androide
  • Firefox (Geco)
  • Firefox móvil (Geco)
  • Navegador de Internet (IE)
  • es decir, móvil
  • ópera
  • Ópera Móvil
  • Safari (WebKit)
  • Safari para móvil

ejemplo

Discutiremos la propiedad border-left-style a continuación, explorando ejemplos de cómo usarla en CSS.

Veamos un ejemplo de configuración de un borde izquierdo discontinuo.

div { border-left-style: dashed; }

En este ejemplo de estilo de borde izquierdo CSS, configuramos el estilo del borde izquierdo en discontinuo.

A continuación, apliquemos estilo a los bordes izquierdo y superior.

div { border-left-style: solid; border-top-style: double; }

En este ejemplo de estilo de borde izquierdo, configuramos el estilo de borde izquierdo en línea sólida y el estilo de borde superior en línea doble. Como puede ver, los lados del borde pueden ser completamente diferentes, lo que puede agregar un efecto visual único a su página web.

(Visited 28 times, 1 visits today)