前言

當要為要元素添加邊框，你可以使用 border 來為元素周圍添加實線或斜線等的邊框，甚至可以指定某個特定方向來做底線等變化，CSS 中也有一個屬性 outline 可以來為元素設定外框線，以中文來說邊框與外框，蠻容易搞混的，外框也容易被理解是在說 border。在 CSS 其實在使用上也有所差異，一定要小心避免誤用。

邊框（Border）

語法：border:size|style|color / b:size|style|color
　　　border-top:size|style|color / bt:size|style|color
　　　border-bottom:size|style|color / bb:size|style|color
　　　border-left:size|style|color / bl:size|style|color
　　　border-right:size|style|color / br:size|style|color
　　　bx:size|style|color
　　　by:size|style|color

Master CSS 與原生 CSS 相同使用相同的屬性語法，但支援了屬性值消除歧異，來簡短類別名稱設定邊框樣式等屬性的方式。

<div class="border:1px border:solid border:black">Master CSS</div>

產生的 CSS：

.border\:1px {
    border-width: 1px;
}

.border\:solid {
    border-style: solid;
}

.border\:black {
    border-color: rgb(0, 0, 0);
}

Border Radius

語法：border-radius:radius / r:radius

要設定邊框的圓角也相當的容易，如同原生 CSS 使用 border-radius 並給予數值，Master CSS 也提供了簡寫 r 來設定。

<div class="border-radius:4px ..."></div>

<div class="r:4 ..."></div>

外框（Outline）

語法：outline:style
　　　outline:color|style
　　　outline:style|width
　　　outline:color|style|width

外框在按鈕或可以被聚焦的元素上有更為醒目鎖定感的視覺效果。

<button class="r:6px ...">Master CSS</button>
<button class="outline:2|solid|blue-60 outline-offset:4px r:6px ...">Master CSS</button>

Border 與 Outline 的方向數值

border 與 outline 這兩個屬性，如同 Padding 與 Margin 屬性能透過屬性值來控制上下左右的樣式，共四個方向的個別樣式，也可以單獨透過屬性來指定某個方向的樣式，以原生 CSS 舉例如下。

border-top: 1px solid blue;     /*  上方邊框  */
border-bottom: 1px solid blue;  /*  下方邊框  */
border-left: 1px solid blue;    /*  左方邊框  */
border-right: 1px solid blue;   /*  右方邊框  */

outline-top: 1px solid red;     /*  上方外框  */
outline-bottom: 1px solid red;  /*  下方外框  */
outline-left: 1px solid red;    /*  左方外框  */
outline-right: 1px solid red;   /*  右方外框  */

除此之外，單獨使用 border-width 或 outline-width 屬性，其屬性值是可以同時設定一個至四個方向的線條粗細。

使用 border 或 outline 宣告樣式，第一個數值的表示，如同 border-width 僅輸入一個數值，四周的線條粗細都是 4px。

border: 4px solid black;
border-width: 4px;

兩個數值以空白間隔，分別表示 top 上與 bottom 下使用 第一個數值，right 右與 left 左使用 第二個數值 作為線條粗細，這個算是比較好記，可以記上下與左右分別對應兩個數值。

border-width: [top & bottom] [right & left];

/*  兩個數值以空白間隔，分別表示上下粗細 2px，右左粗細 4px。  */
border-width: 2px 4px;

三個數值以空白間隔，分別表示 top 上使用 第一個數值，right 右與 left 左使用 第二個數值，bottom 下使用 第三個數值 作為線條粗細，使用三種數值的比較容易搞混，不好理解是哪兩個方向共用一個數值，比較好記的方式可以用時鐘或平面四個方向，由最高（上）、中間（右左被夾在上下的中間）、最低（下）的方式來記。

border-width: [top] [right & left] [bottom];

/*  三個數值以空白間隔，分別表示上粗細 6px，右左粗細 2px，下粗細 4px。  */
border-width: 1px 2px 4px;

四個數值以空白間隔，分別表示 top 上使用 第一個數值，right 右使用 第二個數值，bottom 下使用 第三個數值 ，left 左使用 第四個數值，作為線條粗細，這四個方向不像中文的「上下左右」白話順暢，建議可以使用平面 X 軸左右與 Y 軸上下，再以順時鐘的方向「上右下左」來記會比較順。

border-width: [top] [right] [bottom] [left];

/*  兩個數值以空白間隔，分別表示上粗細 2px，右粗細 4px，下粗細 6px，左粗細 8px。  */
border-width: 2px 4px 6px 8px;

outline-width 屬性的數值對應的方向和 border-width 也是同樣的規則。

使用 Border 與 Outline

在 Master CSS 使用 border 與 outline，還可以透過縮寫與簡寫來設定各個方向的樣式。

你也可以使用方向的簡寫與其結合，t 表示 top 上、b 表示 bottom 下、l 表示 left 左、r 表示 right 右、 x 表示左右、y 表示上下。

Border

Border Radius

當我們在設定 border-width、border-radius 或 outline-width 若有多個方向的數值，在原生 CSS 是以空格相間，在 class 直接使用會導致無法正確解析，我們需要改為使用 | 符號來取代空白。

<div class="border-width:2|4">兩個數值</div>
<div class="border-radius:1|2|4">三個數值</div>
<div class="outline-width:1|2|4|8">四個數值</div>