Border

The border properties are used to control the component border style and width. See available border styles.

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

Variable	Default Value
`--dwc-border-width`	1px
`--dwc-border-style`	solid

Border radius

Border radius variables define how rounded the corners of a component are. All values are defined in em, so they scale with the font size.

EM Unit

em is a relative unit that scales with the font size of the parent.

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