Teutonic CSS

Border size

←

To border or not to border, that’s the question! When no side is given, the border applies to all sides. When no width is given, the default var width of --space-px will apply. There is also a border reset class that will remove all borders for sure. You can customize the border color with CSS variables.

In the example, different border sizes are mixed, an unlikely design case. A border usually adds up to the size of a container, to align the boxes here a fixed height is set and the text labels are centered using a flexbox alignment.

Syntax: .bo{-side?}{_width?}

SCSS: _borders.scss

Border on all sides

bo_px

bo_xs

bo_s

Top border

bo-t_px

bo-t_xs

bo-t_s

Right border

bo-r_px

bo-r_xs

bo-r_s

Bottom border

bo-b_px

bo-b_xs

bo-b_s

Left border

bo-l_px

bo-l_xs

bo-l_s

Reset border

.box.bo-no

Custom border

.bo-t_s.bo-custom

<h4 class="ma-b_xs">
  Border on all sides
</h4>
<div class="grid-auto ma-b_m text-mono">
  <div class="s-h_l bg-j pa_s bo_px flex-center">
    <div class="text-clip">bo_px</div>
  </div>
  <div class="s-h_l bg-j pa_s bo_xs flex-center">
    <div class="text-clip">bo_xs</div>
  </div>
  <div class="s-h_l bg-j pa_s bo_s flex-center">
    <div class="text-clip">bo_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Top border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-t_px">
    <div>bo-t_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-t_xs">
    <div>bo-t_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-t_s">
    <div>bo-t_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Right border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-r_px">
    <div>bo-r_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-r_xs">
    <div>bo-r_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-r_s">
    <div>bo-r_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Bottom border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-b_px">
    <div>bo-b_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-b_xs">
    <div>bo-b_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-b_s">
    <div>bo-b_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Left border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-l_px">
    <div>bo-l_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-l_xs">
    <div>bo-l_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-l_s">
    <div>bo-l_s</div>
  </div>
</div>

<div class="grid gap_s ma-t_m">
  <div class="span-6">
    <h4 class="ma-b_xs">
      Reset border
    </h4>
    <div class="text-clip flex-center height_l bg-o box bo-no">
      <div class="text-mono text-clip">.box.bo-no</div>
    </div>
  </div>
  <div class="span-6">
    <h4 class="ma-b_xs">
      Custom border
    </h4>
    <div class="text-clip flex-center height_l bg-f bo-t_s bo-custom">
      <div class="text-mono text-clip">.bo-t_s.bo-custom</div>
    </div>
  </div>
</div>