Border
Border
Go to top
Default border
.bf-border applies a bifrost default 1px solid border
with --bfc-base-c-dimmed color.
HTML
<div class="bf-border bf-padding">bf-border</div>Single edge border
You can also apply a bifrost default border to a single edge at a time.
HTML
<div class="bf-border-top bf-padding">bf-border-top</div>
<div class="bf-border-left bf-border-right bf-padding">
bf-border-left & bf-border-right
</div>Border radius
.bf-radius applies a bifrost default border-radius: 12px
HTML
<div class="bf-radius bfc-dimmed-bg bf-padding">bf-radius</div>More radius values
| Class | Applies |
|---|---|
.bf-radius-xs | border-radius: 4px |
.bf-radius-s | border-radius: 8px |
.bf-radius or .bf-radius-m | border-radius: 12px |
.bf-radius-l | border-radius: 16px |
.bf-radius-xl | border-radius: 24px |
.bf-radius-full | border-radius: 9999px |
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
| Variable | Value |
|---|---|
--bf-border | 1px solid var(--bfc-base-c-dimmed) |
--bf-radius-none | 0px |
--bf-radius-xs | 4px |
--bf-radius-s | 8px |
--bf-radius or --bf-radius-m | 12px |
--bf-radius-l | 16px |
--bf-radius-xl | 24px |
--bf-radius-full | 9999px |
Can be used in a CSS file:
CSS
.my-selector {
border-top: var(--bf-border);
border-bottom-left-radius: var(--bf-radius);
}Or inline HTML style:
HTML
<div
style="border-top: var(--bf-border); border-bottom-left-radius: var(--bf-radius)"
class="bfc-base-3-bg bf-padding"
>
Useful when you don't want border-radius on all corners.
</div>