邊框 border ( 樣式、粗細、顏色 )

邊框是網頁元素內邊距與外邊距之間的線段，這篇教學主要會介紹網頁元素的 border、border-style、border-width 和 border-color，透過這些樣式屬性，控制邊框的樣式、粗細和顏色，以及同時設定四個方向邊框的語法，設定單一方向邊框或單一樣式屬性的方法。

• 請先閱讀：容器盒子模型 ( box Model )
• 延伸閱讀：邊框圓角

快速導覽：

• border 撰寫語法
• borderg-* 單一邊框
• border-style 邊框樣式
• border-width 邊框粗細
• border-color 邊框顏色
• 內容寬高為 0 的邊框效果 ( 製作三角形 )
• 不可置換行內容器的 border
• 可置換行內容器的 border

border 撰寫語法

border 是元素容器盒子模型裡的「邊框」，也就是元素由內而外，在內邊距和外邊界中間的的線段，網頁中大部分元素 border 預設都是 none，因此大部分元素都不會有邊框，如果讓元素出現邊框，最簡單的方式可以使用「縮寫形式」一次處理「邊框粗細、邊框樣式、邊框顏色」，邊框樣式沒有繼承特性，撰寫語法如下：

div {
  border: 邊框粗細 邊框樣式 邊框顏色;
}

雖然縮寫形式很方便，但仍有一些相關規則：

• 屬性值使用「空白」分隔。
• 屬性值「沒有先後順序規則」。
• 縮寫形式的寫法會讓元素「上下左右四個方向的邊框，呈現相同的粗細、樣式和顏色」。
• 縮寫形式如果沒有邊框樣式，邊框樣式會套用 none，不會呈現邊框。

下方的範例會讓三個 div 呈現不同的邊框，可以注意三個屬性值沒有先後順序關係。

線上展示：https://codepen.io/oxxo/pen/gOJVLaR

<!-- HTML 程式碼 -->
<div class="a">oxxo</div>
<div class="b">apple</div>
<div class="c">banana</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 30px;
    margin: 10px;
  }
  .a {border: 1px solid #000;}
  .b {border: red 5px dotted;}
  .c {border: dashed green 10px;}
</style>

border-* 單一邊框

除了一次設定四個方向的 border 數值，也可以透過單一邊框的樣式屬性，單獨設定上下左右的邊框，撰寫的語法e規則和 border 完全相同。

單一邊框的權重與 border 相同，有時會運用「撰寫順序」來覆寫特定方向的邊框，下方的範例先將 div 的 border 統一設定為 1px solid #000，再運用單一邊框樣式調整特定方向的邊框。

線上展示：https://codepen.io/oxxo/pen/MWdNbaZ

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 100px;
    margin: 10px;
    border: 1px solid #000;
    border-top: 5px solid #000;
    border-right: 10px dashed red;
    border-bottom: 15px double orange;
    border-left: 5px dotted green;
  }
</style>

border-style 邊框樣式

設定邊框時，需要使用特定的「樣式名稱」，就能產生對應的「邊框樣式」，下方列出 CSS 支援的邊框樣式名稱：

邊框樣式名稱的 none 和 hidden 效果在大部分的狀況下都相同，差別僅在於表格的「單元格」邊框重疊時的套用權重，如果使用 none，邊框重疊時如果其中一個元素有設定邊框，則會顯示設定的邊框，使用 hidden 則相反，邊框重疊時會一起隱藏邊框，下方範例可以看出明顯差異 ( 範例有加上陰影識別元素最外緣 )。

線上展示：https://codepen.io/oxxo/pen/LYowbGp

<!-- HTML 程式碼 -->
<table class="a">
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>
<table class="b">
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>
<table class="c">
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>
<table>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border-collapse: collapse;  /* 合併邊框 */
    margin: 20px;
    box-shadow: #000 0 0 10px;  /* 加上陰影識別最外緣 */
  }
  table td {
    border: 20px solid #0007;   /* 邊框用半透明，輔助識別 */
    width: 50px;
    height: 50px;
    background: linear-gradient(to left bottom, red, yellow); /* 使用漸層色輔助識別 */
  }
  .a tr td {
    border-style: none;
  }
  .b tr td{
    border-style: none;
  }
  .b tr:first-child td:first-child{
    border-style: solid;      /* 只有左上第一格有邊框 */
  }
  .c tr td{
    border-style: hidden;
  }
  .c tr:first-child td:first-child{
    border-style: solid;      /* 只有左上第一格有邊框 */
  }
</style>

除了使用 border 的縮寫形式設定邊框樣式，CSS 還提供了「單獨設定」邊框樣式的樣式屬性，屬性值只有樣式名稱，一次設定四個方向邊框的寫法如下：

單一方向的邊框寫法：

下方範例使會使用五個 div，分別呈現不同邊框樣式的設定方式。

線上展示：https://codepen.io/oxxo/pen/gOJVLPR

<!-- HTML 程式碼 -->
<div class="a">border-style: solid dotted dashed double;</div>
<div class="b">border-style: solid dashed double;</div>
<div class="c">border-style: solid double;</div>
<div class="d">border-style: double;</div>
<div class="e">單一邊框設定</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 320px;
    height: 60px;
    border-width: 10px;
    border-color: #000;
    margin: 10px;
    padding: 5px;
  }
  .a {border-style: solid dotted dashed double;}
  .b {border-style: solid dashed double;}
  .c {border-style: solid double;}
  .d {border-style: double;}
  .e {
    border-top-style: solid;
    border-right-style: double;
    border-bottom-style: groove;
    border-left-style: dashed
  }
</style>

border-width 邊框粗細

設定邊框的粗細時，需要使用「具有長度單位」的數值，下方列出 CSS 支援的邊框粗細長度單位：

延伸閱讀：長度與角度單位

除了使用 border 的縮寫形式設定邊框粗細，CSS 還提供了「單獨設定」邊框粗細的樣式屬性，屬性值只有具有長度單位的數值，一次設定四個方向邊框的寫法如下：

單一方向的邊框寫法：

下方範例使會使用五個 div，分別呈現不同邊框粗細的設定方式，長度單位可以混合使用，只要最後可以正確計算出數值就可以。

線上展示：https://codepen.io/oxxo/pen/zYQgorg

<!-- HTML 程式碼 -->
<div class="a">border-width: 5px 0.5em thin thick;</div>
<div class="b">border-width: 5px 15px 1px;</div>
<div class="c">border-width: 5px 15px;</div>
<div class="d">border-width: 5px;</div>
<div class="e">單一邊框粗細</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 320px;
    height: 60px;
    border-style: solid;
    border-color: #000;
    margin: 10px;
    padding: 5px;
    font-size:14px;
  }
  .a {border-width: 5px 0.5em thin thick;}
  .b {border-width: 5px 15px 1px;}
  .c {border-width: 5px 15px;}
  .d {border-width: 5px;}
  .e {
    border-top-width: 5px;
    border-right-width: 0.5em;
    border-bottom-width: thick;
    border-left-width: thin;
  }
</style>

border-color 邊框顏色

設定邊框的顏色時，需要使用「具有顏色單位」的數值，只支援「單色」，每種顏色單位都可以添加不同程度的透明度，「全透明」的邊框有時可以當作「額外的內邊距」，下方列出 CSS 支援的邊框顏色單位

延伸閱讀：顏色單位、CSS 函式 ( 色彩模型 )

除了使用 border 的縮寫形式設定邊框顏色，CSS 還提供了「單獨設定」邊框顏色的樣式屬性，屬性值只有具有顏色單位的數值，一次設定四個方向邊框的寫法如下：

單一方向的邊框顏色寫法：

下方範例使會使用五個 div，分別呈現不同邊框顏色的設定方式，顏色單位可以混合使用，只要最後可以正確計算出顏色數值就可以。

線上展示：https://codepen.io/oxxo/pen/PovMbNJ

<!-- HTML 程式碼 -->
<div class="a">border-color: red #00f rgb(0,200,100) hsl(50, 50%, 50%, 0.5);</div>
<div class="b">border-color: red #00f rgb(0,200,100);</div>
<div class="c">border-color: red #00f;</div>
<div class="d">border-color: red;</div>
<div class="e">單一邊框顏色</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 320px;
    height: 60px;
    border-style: solid;
    border-width: 10px;
    margin: 10px;
    padding: 5px;
    font-size:14px;
  }
  .a {border-color: red #00f rgb(0,200,100) hsl(50, 50%, 50%, 0.5);}
  .b {border-color: red #00f rgb(0,200,100);}
  .c {border-color: red #00f;}
  .d {order-color: red;}
  .e {
    border-top-color: red;
    border-right-color: #00f;
    border-bottom-color: rgb(0,200,100);
    border-left-color: hsl(50, 50%, 50%, 0.5);
  }
</style>

內容寬高為 0 的邊框效果 ( 製作三角形 )

在 box-sizing 預設值為 padding-box 的狀態下，內容寬高不會包含邊框的寬度，因此就能運用邊框實現一些特殊的效果，下方的範例使用「solid」實線邊框樣式，搭配透明色關鍵字 transparent 與邊框寬度，就能做出各種不同方向的「三角形」，下方範例如果將透明色改為 #ccc 淺灰色，就能看出利用邊框做出三角形的原理。

線上展示：https://codepen.io/oxxo/pen/NWVQbMO

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 0;
    height: 0;
    border-style: solid;
    margin: 10px;
  }
  .a {
    border-width:50px;
    border-color: red transparent transparent;  /* 只有上方有顏色 */
  }
  .b {
    border-width:50px 100px 0 0;   /* 下、左邊框寬度為 0 */
    border-color: transparent green transparent transparent;  /* 只有右方有顏色 */
  }
  .c {
    border-width:30px 0 30px 100px;   /* 右側邊框寬度為 0 */
    border-color: transparent transparent transparent orange;  /* 只有左方有顏色 */
  }
  .d {
    border-width:0 20px 100px;     /* 上方邊框寬度為 0 */
    border-color: transparent transparent blue;   /* 只有下方有顏色 */
  }
</style>

不可置換行內容器的 border

雖然不可置換行內容器無法調整寬高 ( 文字樣式的顯示類型大多都是 inline )，但卻可以透過 border 增加邊框，進而改變寬度，不過由於行內容器的高度由字型大小和行高所管控，就算設定了 border 數值，最多也只是覆蓋到其他行內元素，並不會影響整體高度，在行內容器換行時，也會發生邊框跟著換行的現象。

不可置換行內容器表示不會透過 src 等屬性改變元素內容。

下方的範例設定了 strong 和 em 這兩個行內容器元素的 border 數值，因為寬度改變而影響了左右的間距，但上下的 border 雖然有發生作用，但卻不影響容器的行高表現，也不會影響整體的高度。

線上展示：https://codepen.io/oxxo/pen/QWReGNB

<!-- HTML 程式碼 -->
<div>
  <span><strong>STEAM 教育學習網</strong>透過免費且高品質的<em>教學與範例</em>讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>
<span>hello world!!!!</span>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 20px;
  }
  strong {border: 20px solid #f005;}
  em {border: 10px solid #00f5;}
</style>

可置換行內容器的 border

網頁中的圖片元素 img 或 svg 都屬於「可置換」行內容器 ( 顯示類型大多都是 inline-block )，這些元素原本就能設定寬高，而不是根據字型或行高決定容器大小，因此如果設定了 border 數值，就會影響整體容器的或每一行文字的間距。

下方的範例在文字中插入一張圖片，當設定了圖片的 padding 數值，整體高度就會變多，且文字間的行距也會變高。

線上展示：https://codepen.io/oxxo/pen/ExzqNyY

<!-- HTML 程式碼 -->
<div>
  <span>STEAM 教育學習網透過免費且高品質的教學與範例
    <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>
<span>hello world!!!!</span>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 30px 30px 0 0;
  }
  img {
    width: 100px;
    border: 20px solid #f005;
  }
</style>

小結

在網頁設計裡，不論是凸顯效果，或展示頁面裡的不同區域，都很常利用邊框來進行排版，這篇教學介紹了邊框最基本的三個樣式屬性：樣式、寬度和顏色，只要熟練運用，就能讓網頁版面區分得更加清楚。

延伸閱讀：邊框圓角

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～