Border – Once UI

Shape language in design profoundly influences the style of an interface. For instance, a website employing a large border radius often appears more playful, whereas one with small borders and sharp corners tends to convey a more conservative feel.

Shape style

Override the default shape style with the data-border attribute on a native HTML element.

Radius style

<Flex data-border="conservative | playful | rounded" radius="m"/>

Border radius

In Once UI, we adopt the T-shirt size model for managing border radius, with values ranging from xs to xl.

Border radius

<Flex radius="xs" />
<Flex radius="s" />
<Flex radius="m" />
<Flex radius="l" />
<Flex radius="xl" />

Nested radius

A common challenge in border-radius systems is nesting. For nested elements to maintain an aesthetic and natural appearance, they require varying border radius sizes. Once UI addresses this issue by providing additional border radius values specifically for containers with static-size-4 and static-size-8 paddings, which are the most frequently used nesting sizes.

Nested radius

// Any size from xs to xl: the outer box adds -8, the next one -4.
<Flex padding="8" radius="m-8">
<Flex padding="4" radius="m-4">
  <Flex radius="m" />
</Flex>
</Flex>

Border width

Sets the border-width property.

Class	Preview
.border-1
.border-2

Border style

Sets the border-style property.

Class	Preview
.border-solid
.border-dashed

Border color

Sets the border-color property.

Class	Value
.neutral-border-weak	var(--neutral-border-weak)
.neutral-border-medium	var(--neutral-border-medium)
.neutral-border-strong	var(--neutral-border-strong)
.neutral-alpha-alpha-weak	var(--neutral-border-alpha-weak)
.neutral-alpha-alpha-medium	var(--neutral-border-alpha-medium)
.neutral-alpha-alpha-strong	var(--neutral-border-alpha-strong)
.brand-border-weak	var(--brand-border-weak)
.brand-border-medium	var(--brand-border-medium)
.brand-border-strong	var(--brand-border-strong)
.brand-alpha-alpha-weak	var(--brand-border-alpha-weak)
.brand-alpha-alpha-medium	var(--brand-border-alpha-medium)
.brand-alpha-alpha-strong	var(--brand-border-alpha-strong)
.accent-border-weak	var(--accent-border-weak)
.accent-border-medium	var(--accent-border-medium)
.accent-border-strong	var(--accent-border-strong)
.accent-alpha-alpha-weak	var(--accent-border-alpha-weak)
.accent-alpha-alpha-medium	var(--accent-border-alpha-medium)
.accent-alpha-alpha-strong	var(--accent-border-alpha-strong)
.warning-border-weak	var(--warning-border-weak)
.warning-border-medium	var(--warning-border-medium)
.warning-border-strong	var(--warning-border-strong)
.warning-alpha-alpha-weak	var(--warning-border-alpha-weak)
.warning-alpha-alpha-medium	var(--warning-border-alpha-medium)
.warning-alpha-alpha-strong	var(--warning-border-alpha-strong)
.danger-border-weak	var(--danger-border-weak)
.danger-border-medium	var(--danger-border-medium)
.danger-border-strong	var(--danger-border-strong)
.danger-alpha-alpha-weak	var(--danger-border-alpha-weak)
.danger-alpha-alpha-medium	var(--danger-border-alpha-medium)
.danger-alpha-alpha-strong	var(--danger-border-alpha-strong)
.success-border-weak	var(--success-border-weak)
.success-border-medium	var(--success-border-medium)
.success-border-strong	var(--success-border-strong)
.success-alpha-alpha-weak	var(--success-border-alpha-weak)
.success-alpha-alpha-medium	var(--success-border-alpha-medium)
.success-alpha-alpha-strong	var(--success-border-alpha-strong)