Lism Tips

枠線・角丸・影（-bd など）

枠線（-bd・-bd-t など）、線の種類・色・太さ（bds・bdc・bdw）、角丸（-bdrs）、影（-bxsh）のクラスをまとめて引けます。

箱のまわりに線を引く、角を丸くする、影を付ける。この3つを受け持つ Property Class（- で始まる、CSS の1つの性質を決めるクラス）をまとめたページです。線は -bd、角丸は -bdrs、影は -bxsh が中心になります。

どんなときに使う？#

  • カードやボックスの外側に、うすい線を引きたいとき（-bd）
  • 見出しの下だけ、左だけなど、1つの辺にだけ線を引きたいとき（-bd-b・-bd-l など）
  • ボタンや画像の角を丸くしたいとき（-bdrs）
  • 箱を少し浮かせて見せたいとき（-bxsh）

枠線を引く（-bd）#

-bd を付けると、4つの辺すべてに線が引かれます。bd は border（枠線）の略です。何も足さなければ、太さ 1px の実線で、色は区切り線の色（--divider）になります。

表示例

-bd だけを付けた箱
html
<div class="-bd -p:20">-bd だけを付けた箱</div>

線の見た目は、次の3つの CSS 変数（-- で始まる、あとから値を入れ替えられる入れ物）で決まります。

変数 決めること 何もしないときの値
--bds 線の種類（border-style） solid（実線）
--bdw 線の太さ（border-width） 1px
--bdc 線の色（border-color） var(--divider)
補足

Lism の枠線は、ふつうの CSS の書き方と少し違います。線を「出す」のは -bd や -bd-t などのクラスで、種類・太さ・色は3つの変数で後から変えるしくみです。

線の種類・色・太さを変える#

種類と色には、決まった値のクラスがあります。太さにはクラスが無いので、style 属性で --bdw に値を入れます。

Shorthand 変えるもの 用意されているクラスの値
bds --bds（線の種類） dashed（破線）・dotted（点）・double（二重線）
bdc --bdc（線の色） brand・accent・divider・keycolor・inherit・transparent・current
bdw --bdw（線の太さ） クラスは無し。ブレイクポイント用の -bdw_sm などはある

-bdc:current は、その要素の文字の色（currentColor）と同じ色の線になります。-bdc:keycolor は --keycolor 変数の色を使います。

表示例

-bds:dashed
-bds:dotted と -bdc:brand
-bds:double と太さ 4px
-bdc:current（文字と同じ紫の線）
html
<div class="l--stack -g:20">
  <div class="-bd -bds:dashed -p:20">-bds:dashed</div>
  <div class="-bd -bds:dotted -bdc:brand -p:20">-bds:dotted と -bdc:brand</div>
  <div class="-bd -bds:double -p:20" style="--bdw: 4px">-bds:double と太さ 4px</div>
  <div class="-bd -bdc:current -c -fz:l -fw:bold -p:20" style="--c: var(--purple)">-bdc:current（文字と同じ紫の線）</div>
</div>

--bdc には、style="--bdc: var(--red)" のように色のトークン（色のトークン）も入れられます。

1つの辺にだけ線を引く（-bd-{side}）#

-bd- のあとに向きを付けると、その辺にだけ線が引かれます。上下左右（top・right・bottom・left）の決まった向きのほかに、文字を書く向きに合わせて変わる「論理方向」も選べます。

クラス 線を引く場所 対応する CSS
-bd-t 上 border-top
-bd-r 右 border-right
-bd-b 下 border-bottom
-bd-l 左 border-left
-bd-x 行の向きの両端（横書きなら左右） border-inline
-bd-y 行が積まれる向きの両端（横書きなら上下） border-block
-bd-s 行の始まり側（横書きなら左） border-inline-start
-bd-e 行の終わり側（横書きなら右） border-inline-end
-bd-bs ブロックの始まり側（横書きなら上） border-block-start
-bd-be ブロックの終わり側（横書きなら下） border-block-end
-bd:none 線を消す border: none

表示例

-bd-t（上）
-bd-b（下）
-bd-s（行の始まり側）
-bd-y（上下）
html
<div class="l--stack -g:20">
  <div class="-bd-t -px:10">-bd-t（上）</div>
  <div class="-bd-b -px:10">-bd-b（下）</div>
  <div class="-bd-s -px:10 -bgc:base-2" style="--bdw: 2px">-bd-s（行の始まり側）</div>
  <div class="-bd-y -px:10 -bgc:base-2" style="--bdw: 2px">-bd-y（上下）</div>
</div>

-bd-{side} でも、太さ・種類・色は同じ3つの変数で変えられます。

辺ごとに違う線にする#

-bd を付けたうえで、--bdw・--bds・--bdc に辺ごとの値を空白で区切って入れると、辺ごとに違う線になります。並び順はふつうの CSS と同じ（上・右・下・左）です。

表示例

左が太く、下が点線
html
<div class="-bd -p:20" style="--bdw: 0 0 1px 0.5em; --bds: dashed solid; --bdc: var(--purple) var(--blue)">左が太く、下が点線</div>

上の例では、上と右の太さが 0 なので線は見えません。下は 1px、左は 0.5em になります。

画面の幅で太さを変える#

太さ（bdw）は、画面の幅で切り替えられます（画面の幅で切り替える（レスポンシブ））。-bdw_sm などのクラスと、--bdw_sm などの変数をセットで書きます。

表示例

せまいと 1px、広いと 6px
html
<div class="-bd -bdw_sm -p:20" style="--bdw: 1px; --bdw_sm: 6px">せまいと 1px、広いと 6px</div>

この表示例は、スマートフォンでは 1px、広い画面（480px 以上）では 6px の線になります。

線の向きを切り替える#

太さの切り替えを使うと、線の向きも変えられます。せまい画面では縦に並べて上に線、広い画面では横に並べて左に線、という区切り方ができます。

表示例

Box
Box
Box
html
<div class="l--flex -fxd:column -fxd_sm" style="--fxd_sm: row">
  <div class="-px:20 -py:5">Box</div>
  <div class="-px:20 -py:5 -bd-s -bd-bs -bdw_sm" style="--bdw: 1px 0; --bdw_sm: 0 1px">Box</div>
  <div class="-px:20 -py:5 -bd-s -bd-bs -bdw_sm" style="--bdw: 1px 0; --bdw_sm: 0 1px">Box</div>
</div>

-bd-s と -bd-bs で、上と左の2辺に線を出せるようにしておきます。--bdw: 1px 0 は「上下 1px・左右 0」なので上の線だけが見え、--bdw_sm: 0 1px は「上下 0・左右 1px」なので左の線だけが見えます。

角を丸くする（-bdrs）#

-bdrs は border-radius（角の丸み）の略です。数字が大きいほど丸くなります。

クラス 丸みの大きさ
-bdrs:0 0（角ばったまま）
-bdrs:10 0.25rem
-bdrs:20 0.375rem
-bdrs:30 0.625rem
-bdrs:40 1rem
-bdrs:50 1.5rem
-bdrs:99 99rem（両端が半円になる）
-bdrs:inner 親の丸みから余白を引いた大きさ

表示例

10
30
50
99
html
<div class="l--cluster -g:10">
  <div class="-bd -bdrs:10 -p:20">10</div>
  <div class="-bd -bdrs:30 -p:20">30</div>
  <div class="-bd -bdrs:50 -p:20">50</div>
  <div class="-bd -bdrs:99 -px:30 -py:10">99</div>
</div>

-bdrs:inner の値は calc(var(--bdrs, 0px) - var(--p, 0px) + 1px) です。丸い箱の中に、もう1つ丸い箱を入れるときに使います。

表示例

内側の箱
html
<div class="-bd -bdrs:50 -p:10">
  <div class="-bdrs:inner -bgc:base-2 -p:20">内側の箱</div>
</div>

-bdrs は画面の幅での切り替え（-bdrs_sm など）にも対応しています。値の一覧とトークンのしくみは デザイントークン にもあります。

1つの角だけ丸くする#

1つの角だけの丸みにも Shorthand があります。ただし決まった値のクラスは無いので、主に React・Astro のコンポーネント（bdrs-tl="20px" のような書き方）で使います。

Shorthand 角 対応する CSS
bdrs-tl 左上 border-top-left-radius
bdrs-tr 右上 border-top-right-radius
bdrs-br 右下 border-bottom-right-radius
bdrs-bl 左下 border-bottom-left-radius
bdrs-ss ブロックの始まり・行の始まり border-start-start-radius
bdrs-se ブロックの始まり・行の終わり border-start-end-radius
bdrs-es ブロックの終わり・行の始まり border-end-start-radius
bdrs-ee ブロックの終わり・行の終わり border-end-end-radius

影を付ける（-bxsh）#

-bxsh は box-shadow（箱の影）の略です。数字が大きいほど、影が大きく広がり、箱が浮いて見えます。

クラス 影
-bxsh:0 影なし
-bxsh:10 いちばん小さい影
-bxsh:20 小さい影
-bxsh:30 中くらいの影
-bxsh:40 大きい影
-bxsh:50 いちばん大きい影

表示例

-bxsh:10
-bxsh:30
-bxsh:50
html
<div class="l--stack -g:30 -p:20">
  <div class="-bxsh:10 -bdrs:20 -p:20">-bxsh:10</div>
  <div class="-bxsh:30 -bdrs:20 -p:20">-bxsh:30</div>
  <div class="-bxsh:50 -bdrs:20 -p:20">-bxsh:50</div>
</div>

-bxsh も、画面の幅での切り替え（-bxsh_sm など）に対応しています。

React・Astro で書く場合#

コンポーネントでは、クラスの - を取った名前を Props として渡します。bdc・bdw・bds は CSS 変数として出力されます。

jsx
<Box bd bds="dashed" bdw="4px" bdc="red" p="15">
  <p>テキスト</p>
</Box>

<Box bd-t px="10">上だけの線</Box>

<Box bd bdw={['1px', '3px', '6px']} p="15">太さが切り替わる</Box>

<Lism bxsh="20" bdrs="20" p="20" bd>Box</Lism>

コンポーネントの書き方は Lism コンポーネント（React・Astro） で説明しています。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧