Border
Default border
.bf-border applies a bifrost default 1px solid border
with --bfc-base-dimmed color.
<div class="bf-border bf-padding">bf-border</div><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.
<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><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
<div class="bf-radius bfc-dimmed-bg bf-padding">bf-radius</div><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-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:
.my-selector {
border-top: var(--bf-border);
border-bottom-left-radius: var(--bf-radius);
}
.my-selector {
border-top: var(--bf-border);
border-bottom-left-radius: var(--bf-radius);
}
Or inline HTML style:
<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><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>