Border
Die Rahmen-Eigenschaften werden verwendet, um den Rahmenstil und die Breite des Komponents zu steuern. Siehe verfügbare Rahmenstile.
Beispiel
.element {
border: var(--dwc-border-width) var(--dwc-border-style) red;
}
Variablen
| Variable | Standardwert |
|---|---|
--dwc-border-width | 1px |
--dwc-border-style | solid |
Rahmenradius
Die Rahmenradius-Variablen definieren, wie abgerundet die Ecken eines Komponents sind. Alle Werte werden in em definiert, sodass sie mit der Schriftgröße skalieren.
EM-Einheit
em ist eine relative Einheit, die mit der Schriftgröße des Elternelements skaliert.
Beispiel
.element {
border-radius: var(--dwc-border-radius-m);
}
Variablen
| Variable | Standardwert | Beispiel |
|---|---|---|
--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) |