Border
De randproperties worden gebruikt om de randstijl en -breedte van de component te regelen. Zie beschikbare randstijlen.
Voorbeeld
.element {
border: var(--dwc-border-width) var(--dwc-border-style) red;
}
Variabelen
| Variabele | Standaardwaarde |
|---|---|
--dwc-border-width | 1px |
--dwc-border-style | solid |
Randradius
Randradiusvariabelen definiëren hoe afgerond de hoeken van een component zijn. Alle waarden zijn gedefinieerd in em, waardoor ze schalen met de lettergrootte.
EM-eenheid
em is een relatieve eenheid die schaalt met de lettergrootte van de bovenliggende element.
Voorbeeld
.element {
border-radius: var(--dwc-border-radius-m);
}
Variabelen
| Variabele | Standaardwaarde | Voorbeeld |
|---|---|---|
--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) |