W3.CSS ボーダー

ボーダークラス

W3.CSS ボーダークラスは、全ての HTML 要素で使用することができます。

I have borders.

I have rounded borders.

例

<div class="w3-border">
<p>I have borders.</p>
</div>

<div class="w3-border w3-round-xlarge">
<p>I have rounded borders.</p>
</div>

Try It Yourself ❯

各サイドのボーダー・クラス

I have only a left border.

I have top and bottom borders.

I have a red bottom border.

例

<div class="w3-border-left">
<p>I have only a left border.</p>
</div>

<div class="w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>

<div class="w3-border-bottom w3-border-red">
<p>I have a red bottom border.</p>
</div>

Try It Yourself ❯

バー・クラス

W3.CSS バー・クラスは、全ての HTML 要素で使用することができます。

I have a blue leftbar.

I have a blue bottombar.

I have green bars.

例

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>

Try It Yourself ❯

ホバー効果付きボーダー

w3-hover-border-color クラスは、マウスを乗せるとボーダーの色を変更します：

Red hoverable border

Purple border that turns blue on hover

Red bars that turns green on hover.

例

<div class="w3-container w3-border w3-hover-border-red">
<p>Red hoverable border</p>
</div>

Try It Yourself ❯

❮ 前章へ次章へ ❯