Avenirs DSAV

Appearance

Border ​

Last updated: 2026-10-08

✨ Introduction ​

This border utility generates border width, border style and border radius classes for all defined sizes.

🏷️ Class patterns ​

Class patternDescription
.av-border-width-{none|sm|md|lg}Applies border-width with the specified size
.av-border-style-{solid|dashed|dotted|none}Applies border-style with the specified style
.av-radius-{none|xxs|xs|sm|md|lg|xl|hg|full}Applies border-radius with the specified size
.av-separator-{top|right|bottom|left}Applies a separator (1px solid var(--stroke)) to the specified direction

🎨 Some CSS results ​

Border width classes ​

css
.av-border-width-sm {
  border-width: 0.0625rem !important;
}

.av-border-width-md {
  border-width: 0.125rem !important;
}

Border style classes ​

css
.av-border-style-solid {
  border-style: solid !important;
}

.av-border-style-dashed {
  border-style: dashed !important;
}

Border radius classes ​

css
.av-radius-sm {
  border-radius: var(--radius-sm) !important;
}

.av-radius-md {
  border-radius: var(--radius-md) !important;
}

Separator classes ​

css
.av-separator-top {
  border-top: 1px solid var(--stroke) !important;
}

.av-separator-right {
  border-right: 1px solid var(--stroke) !important;
}

.av-separator-bottom {
  border-bottom: 1px solid var(--stroke) !important;
}

.av-separator-left {
  border-left: 1px solid var(--stroke) !important;
}

💡 Examples of use ​

html
<div class="av-border-width-sm av-border-style-solid av-radius-sm av-separator-bottom">
  <!-- border-width-sm: border width sm (0.0625rem) on all screens -->
  <!-- border-style-solid: solid border style on all screens -->
  <!-- radius-sm: border radius sm (var(--radius-sm)) on all screens -->
  <!-- av-separator-bottom: separator at the bottom (1px solid var(--stroke)) on all screens -->
</div>