Border

Abrir en ChatGPT

Las propiedades de borde se utilizan para controlar el estilo y el ancho del borde del componente. Consulta los estilos de bordes disponibles.

Ejemplo

.element {
  border: var(--dwc-border-width) var(--dwc-border-style) red;
}

Variables

Variable	Valor por defecto
--dwc-border-width	1px
--dwc-border-style	sólido

Radio de borde

Las variables de radio de borde definen cuán redondeadas están las esquinas de un componente. Todos los valores se definen en em, por lo que escalan con el tamaño de fuente.

Unidad EM

em es una unidad relativa que se escala con el tamaño de fuente del elemento padre.

Ejemplo

.element {
  border-radius: var(--dwc-border-radius-m);
}

Variables

Variable	Valor por defecto	Ejemplo
--dwc-border-radius-2xs	0.071em
--dwc-border-radius-xs	0.125em
--dwc-border-radius-s	0.25em
--dwc-border-radius-m	0.375em
--dwc-border-radius-l	0.5em
--dwc-border-radius-xl	0.75em
--dwc-border-radius-2xl	1em
--dwc-border-radius-round	50%
--dwc-border-radius-pill	9999px
--dwc-border-radius	var(--dwc-border-radius-s)