边框 ( border )

边框是网页元素内边距与外边界之间的线段，这篇教学主要会介绍网页元素的 border、border-style、border-width 和 border-color，透过这些样式属性，控制边框的样式、粗细和颜色，以及同时设定四个方向边框的语法，设定单一方向边框或单一样式属性的方法。

• 请先阅读：容器盒子模型 ( box Model )
• 延伸阅读：边框圆角

快速导览：

• border 边框 ( 缩写格式 )
• borderg-* 单一边框
• border-style 边框样式
• border-width 边框粗细
• border-color 边框颜色
• 内容宽高为 0 的边框效果 ( 制作三角形 )
• 不可置换行内容器的 border
• 可置换行内容器的 border

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

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>

小结

在网页设计里，不论是凸显效果，或展示页面里的不同区域，都很常利用边框来进行排版，这篇教学介绍了边框最基本的三个样式属性：样式、宽度和颜色，只要熟练运用，就能让网页版面区分得更加清楚。

延伸阅读：边框圆角

意见反馈