Borders

Atomic classes for managing an element’s borders properties.

Classes

🔗
Class CSS Responsiveness
.ba border: solid 1px; Y
.bt border-top: solid 1px; Y
.bb border-bottom: solid 1px; Y
.bl border-left: solid 1px; Y
.br border-right: solid 1px; Y
.by border-top: solid 1px; border-bottom: solid 1px; N
.bx border-left: solid 1px; border-right: solid 1px; N

Border Widths

🔗
Class CSS Responsiveness
.baw0 border-width: 0; Y
.baw1 border-width: 1px; Y
.baw2 border-width: 2px; Y
.baw3 border-width: 4px; Y
.btw0 border-top-width: 0; Y
.btw1 border-top-width: 1px; Y
.btw2 border-top-width: 2px; Y
.btw3 border-top-width: 4px; Y
.brw0 border-right-width: 0; Y
.brw1 border-right-width: 1px; Y
.brw2 border-right-width: 2px; Y
.brw3 border-right-width: 4px; Y
.bbw0 border-bottom-width: 0; Y
.bbw1 border-bottom-width: 1px; Y
.bbw2 border-bottom-width: 2px; Y
.bbw3 border-bottom-width: 4px; Y
.blw0 border-left-width: 0; Y
.blw1 border-left-width: 1px; Y
.blw2 border-left-width: 2px; Y
.blw3 border-left-width: 4px; Y
.bxw* border-left-width / border-right-width: *; N
.byw* border-top-width / border-bottom-width: *; N

Border Styles

🔗
Class CSS
.bas-solid border-style: solid;
.bas-dashed border-style: dashed;
.bts-solid border-top-style: solid;
.bts-dashed border-top-style: dashed;
.brs-solid border-right-style: solid;
.brs-dashed border-right-style: dashed;
.bbs-solid border-bottom-style: solid;
.bbs-dashed border-bottom-style: dashed;
.bls-solid border-left-style: solid;
.bls-dashed border-left-style: dashed;

Border Colors

🔗

Each color stop can also be applied to borders. Refer to the Colors documentation for the complete list of available classes.

Customization

CSS Variables (Runtime)

Border radius sizes are exposed as CSS custom properties: 

:root {
  --br-xs: 0.1875rem; /* 3px */
  --br-sm: 0.3125rem; /* 5px */
  --br-md: 0.5rem;    /* 8px */
  --br-lg: 1rem;      /* 16px */
  --br-xl: 1.5rem;    /* 24px */
}

/* Use in custom components */
.my-button {
  border-radius: var(--br-md);
}

SCSS Variables (Build-time)

Override SCSS variables before importing:

@use "@enodo/foundation-css" with (
  $borders: (
    xs: 3px,
    sm: 5px,
    md: 8px,
    lg: 16px,
    xl: 24px,
  )
);