Border

Default border

.bf-border applies a bifrost default 1px solid border with --bfc-base-c-dimmed color.

Single edge border

You can also apply a bifrost default border to a single edge at a time.

• .bf-border-top
• .bf-border-right
• .bf-border-bottom
• .bf-border-left

Border radius

.bf-radius applies a bifrost default border-radius: 12px

More radius values

Combinations

Border and radius

You can use both .bf-radius-* and .bf-border together:

Shadow and radius

.bf-shadow applies a default bifrost drop shadow

CSS variables

Can be used in a CSS file:

.my-selector {
  border-top: var(--bf-border);
  border-bottom-left-radius: var(--bf-radius);
}

Or inline HTML style: