W3.CSS Borders (邊框)

<div class="w3-panel w3-border">

  <p>我有邊界</p>

</div>

<div class="w3-panel w3-border-left">

  <p>我只有一個左邊框</p>

</div>

<div class="w3-panel w3-border-top w3-border-bottom">

  <p>我有上下邊界</p>

</div>

<div class="w3-panel w3-border w3-border-red">

  <p>我有紅色邊框。</p>

</div>

<div class="w3-panel w3-border-left w3-border-blue">

  <p>我有一個藍(lán)色的左邊框。</p>

</div>

<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">

  <p>我有一個綠色的頂部和底部邊框。</p>

</div>

<div class="w3-panel w3-border">

    <p>我有正常的邊框。</p>

</div>

<div class="w3-panel w3-border w3-round-small">

    <p>我有小的圓角邊框。</p>

</div>

<div class="w3-panel w3-border w3-round">

    <p>我邊框是圓角邊框。</p>

</div>

<div class="w3-panel w3-border w3-round-large">

    <p>我有大的圓角邊框。</p>

</div>

<div class="w3-panel w3-border w3-round-xlarge">

    <p>我有xlarge圓角邊框。</p>

</div>

<div class="w3-panel w3-border w3-round-xxlarge">

    <p>我有xxlarge圓角邊框。</p>

</div>

<div class="w3-panel w3-border w3-hover-border-red">

  <p>懸停時變?yōu)榧t色的邊框。</p>

</div>

<div class="w3-panel w3-border w3-border-red w3-hover-border-green">

  <p>懸停時變?yōu)榫G色的紅色邊框。</p>

</div>

<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">

  <p>白色（不可見）的左粗邊框在懸停時變?yōu)榫G色。</p>

</div>

<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">

  <p>白色（不可見）底邊框粗，在懸停時變?yōu)榫G色。</p>

</div>

<div style="border:16px solid white" class="w3-panel w3-hover-border-green">

  <p>白色（不可見）粗邊框在懸停時變?yōu)榫G色。</p>

</div>

<div style="border:16px solid white" class="w3-panel w3-hover-border-black">

  <p>白色（不可見）的粗邊框會在懸停時變黑。</p>

</div>