Border
Reunusomina käytetään komponentin reunustyylin ja leveyden hallintaan. Katso saatavilla olevat reunustyylit.
Esimerkki
.element {
border: var(--dwc-border-width) var(--dwc-border-style) red;
}
Muuttujat
| Muuttuja | Oletusarvo |
|---|---|
--dwc-border-width | 1px |
--dwc-border-style | solid |
Reunuksen säde
Reunuksen sädemuuttujat määrittelevät, kuinka pyöristetyt komponentin kulmat ovat. Kaikki arvot on määritelty em-yksikössä, joten ne skaalaavat fonttikoon mukaan.
EM-yksikkö
em on suhteellinen yksikkö, joka skaalaa fonttikoon mukaan.
Esimerkki
.element {
border-radius: var(--dwc-border-radius-m);
}
Muuttujat
| Muuttuja | Oletusarvo | Esimerkki |
|---|---|---|
--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) |