Skip to main content

Borders

Borders provide style, width, and radius to the edges of an element.

import Borders from '@dynatrace/strato-design-tokens/borders';

Borders.Style

SampleToken NameValueDescription
Borders.Style.DefaultsolidUse as the default border style.
Borders.Style.DasheddashedUse to indicate interactive text.

Borders.Width

SampleToken NameValueDescription
Borders.Width.Default1pxUse as the default border width.
Borders.Width.Emphasized2pxUse to emphasize borders. This can be useful to clearly separate content.

Borders.Radius

SampleToken NameValueDescription
Borders.Radius.Surface.Subdued12pxUse as the subdued border radius for surfaces.
Borders.Radius.Surface.Default16pxUse as the default border radius for surfaces.
Borders.Radius.Container.Subdued8pxUse as the subdued border radius for containers.
Borders.Radius.Container.Default12pxUse as the default border radius for containers.
Borders.Radius.Field.Subdued4pxUse as the subdued border radius for fields.
Borders.Radius.Field.Default8pxUse as the default border radius for fields.
Borders.Radius.Field.Emphasized9999pxUse for rounded or pill-like shapes.
Still have questions?
Find answers in the Dynatrace Community