Borderの使い方

Class

Tachyonsは境界線を引くためのユーティリティクラスを用意しています。

クラス CSSプロパティ
ba border-style: solid;
border-width: 1px;
bt border-top-style: solid;
border-top-width: 1px;
br border-right-style: solid;
border-right-width: 1px;
bb border-bottom-style: solid;
border-bottom-width: 1px;
bl border-left-style: solid;
border-left-width: 1px;

Border

要素に境界線を引くには、baクラスを指定します。

<div class="ba">.ba</div>
.ba

Border top

要素の上(top)に境界線を引くには、btクラスを指定します。

<div class="bt">.bt</div>
.bt

要素の右(right)に境界線を引くには、brクラスを指定します。

<div class="br">.br</div>
.br

Border bottom

要素の下(bottom)に境界線を引くには、bbクラスを指定します。

<div class="bb">.bb</div>
.bb

Border left

要素の左(left)に境界線を引くには、blクラスを指定します。

<div class="bl">.bl</div>
.bl

Border width

Class Css property
bw1 border-width: .125rem;
bw2 border-width: .25rem;
bw3 border-width: .5rem;
bw4 border-width: 1rem;
bw5 border-width: 2rem;
.ba .bw1
.ba .bw2
.ba .bw3
.ba .bw4
.ba .bw5

Border style

クラス 説明
b--dashed 破線
b--dotted 点線
.ba
.ba .b--dashed
.ba .b--dotted

Border color

<div class="ba b--black mv3 pa1">
.ba .b--black
</div>
.ba .b--black
.ba .b--near-black
.ba .b--dark-gray
.ba .b--mid-gray
.ba .b--gray
.ba .b--silver
.ba .b--light-silver
.ba .b--light-gray
.ba .b--near-white
.ba .b--dark-red
.ba .b--red
.ba .b--orange
.ba .b--gold
.ba .b--yellow
.ba .b--purple
.ba .b--light-purple
.ba .b--hot-pink
.ba .b--dark-pink
.ba .b--pink
.ba .b--dark-green
.ba .b--green
.ba .b--navy
.ba .b--dark-blue
.ba .b--blue
.ba .b--light-blue
.ba .b--lightest-blue