Nuclear css border properties

Border

The border property is a shorthand property for the following individual border properties:

• border-width
• border-style - (required)
• border-color

.bd-n   { border: none;  }

.bds-h  { border-style: hidden; }
.bds-dt { border-style: dotted; }
.bds-ds { border-style: dashed; }
.bds-s  { border-style: solid; }
.bds-db { border-style: double; }

.bdw-1  { border-width: var(--border-width-1); }
.bdw-2  { border-width: var(--border-width-2); }
.bdw-3  { border-width: var(--border-width-3); }
.bdw-4  { border-width: var(--border-width-4); }

<div class="bds-s bdw-2">
  content
</div>

Border radius

The border-radius property is a shorthand property for setting the four border-*-radius properties.

• length - Defines the shape of the corners. Default value is 0
• % - Defines the shape of the corners in %

Tip: This property allows you to add rounded borders to elements!

.bdrs-1   { border-radius: var(--border-radius-1); }
.bdrs-2   { border-radius: var(--border-radius-2); }

.bdtrrs-1 { border-top-right-radius: var(--border-radius-1); }
.bdtrrs-2 { border-top-right-radius: var(--border-radius-2); }

.bdtlrs-1 { border-top-left-radius: var(--border-radius-1); }
.bdtlrs-2 { border-top-left-radius: var(--border-radius-2); }

.bdbrrs-1 { border-bottom-right-radius: var(--border-radius-1); }
.bdbrrs-2 { border-bottom-right-radius: var(--border-radius-2); }

.bdblrs-1 { border-bottom-left-radius: var(--border-radius-1); }
.bdblrs-2 { border-bottom-left-radius: var(--border-radius-2); }

<div class="bds-s bdw-2 bdrs-2">
  content
</div>