ボーダー

ボーダーの太さ・方向

ボーダーの太さを設定するborder-widthプロパティのユーティリティクラスが用意されています。su-border-[WIDTH]クラスを付与することで、指定の太さに応じた実線のボーダーを設定できます。太さはpx単位で1〜5pxまで設定でき、サフィックスには太さの数値が入ります。

また、su-border-[DIRECTION]-[WIDTH]クラスを付与することで、特定の方向のみにボーダーを適用することができます。方向は上方向はsu-border-t-[WIDTH]、下方向はsu-border-b-[WIDTH]、左方向はsu-border-l-[WIDTH]、右方向はsu-border-r-[WIDTH]と、Top（t）、Bottom（b）、Left（l）、Right（r）のそれぞれ頭文字がサフィックスとして入ります。

<div class="su-border-3">3pxの実線のボーダーが適用されます。</div>

<!-- 指定した方向のみボーダーを設定する -->
<div class="su-border-t-1 su-border-b-1">1pxの実線のボーダーが上方向と下方向のみ適用されます。</div>

クラス名の一覧

※下記リストは太さのバリエーションを省略しています

ボーダーの形状

ボーダーの形状を設定できるborder-styleプロパティのユーティリティクラスが用意されています。su-border-[STYLE]クラスを追加することで、それぞれ対応するボーダーの形状が設定されます。

<div class="su-border-2 su-border-dashed">上下左右方向に2pxの破線のボーダーが適用されます。</div>

クラス名の一覧

ボーダーの色

ボーダーの色を設定できるborder-colorプロパティのユーティリティクラスが用意されています。su-color-[COLOR_NAME]クラスを追加することで、それぞれ対応するボーダーの色が設定されます。また、su-color-[COLOR_NAME]-[TONE_NAME]クラスを追加した場合には、トーン違いのボーダーの色を設定することができます。デフォルトではトーン4の色が適用されますが、トーン名を、paleとするとトーン0が、lightとするとトーン2が、midとするとトーン6が、darkとするとトーン8の色が設定されるようになります。使用されるカラーやトーンについては、Startify-UIのデザイントークンで採用されているカラースキームの配色に対応した色が用意されています。

<div class="su-border-1 su-border-pink-mid">
  上下左右方向に1pxの実線のボーダーがピンクのトーン6の色で適用されます。
</div>

クラス名の一覧

※下記リストはトーンのバリエーションを省略しています