CSS 邊框 (Border)

border 屬性用來設定元素的邊框，包括寬度、樣式和顏色。

border-width（邊框寬度）

設定邊框的粗細。

.box {
  border-width: 1px;           /* 四邊相同 */
}

.different {
  border-width: 1px 2px 3px 4px;  /* 上 右 下 左 */
}

/* 個別設定 */
.custom {
  border-top-width: 2px;
  border-right-width: 1px;
  border-bottom-width: 2px;
  border-left-width: 1px;
}

可用的關鍵字值：thin、medium、thick

border-style（邊框樣式）

設定邊框的線條樣式，這是讓邊框顯示的必要屬性。

.solid {
  border-style: solid;     /* 實線 */
}

.dashed {
  border-style: dashed;    /* 虛線 */
}

.dotted {
  border-style: dotted;    /* 點線 */
}

.double {
  border-style: double;    /* 雙線 */
}

.groove {
  border-style: groove;    /* 凹槽效果 */
}

.ridge {
  border-style: ridge;     /* 凸起效果 */
}

.inset {
  border-style: inset;     /* 內嵌效果 */
}

.outset {
  border-style: outset;    /* 外凸效果 */
}

.none {
  border-style: none;      /* 無邊框（預設） */
}

.hidden {
  border-style: hidden;    /* 隱藏（用於表格） */
}

可以對各邊設定不同樣式：

.mixed {
  border-style: solid dashed dotted double;  /* 上 右 下 左 */
}

border-color（邊框顏色）

設定邊框的顏色。

.box {
  border-color: red;
}

.different {
  border-color: red green blue yellow;  /* 上 右 下 左 */
}

/* 個別設定 */
.custom {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

border（縮寫屬性）

border 是最常用的縮寫，一次設定寬度、樣式和顏色。

.box {
  border: 1px solid black;
}

/* 等同於 */
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

單邊設定

可以只設定特定一邊的邊框：

.box {
  border-top: 2px solid red;
  border-right: 1px dashed blue;
  border-bottom: 3px dotted green;
  border-left: none;
}

常見用法：底線效果

.underline {
  border-bottom: 2px solid black;
}

移除邊框

.no-border {
  border: none;
}

/* 或 */
.no-border {
  border: 0;
}

/* 移除特定邊 */
.no-top-border {
  border-top: none;
}

border-image（圖片邊框）

使用圖片作為邊框。

.fancy-border {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

border-image 相關屬性：

• border-image-source：圖片來源
• border-image-slice：圖片切割方式
• border-image-width：邊框圖片寬度
• border-image-outset：邊框圖片向外延伸的距離
• border-image-repeat：圖片重複方式

實用範例

基本邊框

.card {
  border: 1px solid #ddd;
}

強調邊框

.highlight {
  border: 3px solid #007bff;
}

分隔線

.divider {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

表單輸入框

input {
  border: 1px solid #ccc;
}

input:focus {
  border-color: #007bff;
  outline: none;
}

按鈕外框

.btn-outline {
  background: transparent;
  border: 2px solid #007bff;
  color: #007bff;
}

.btn-outline:hover {
  background: #007bff;
  color: white;
}

邊框和 Box Model

邊框會增加元素的實際大小（除非使用 box-sizing: border-box）：

.box {
  width: 200px;
  border: 10px solid black;
  /* 實際寬度 = 200 + 10 + 10 = 220px */
}

.box-border {
  width: 200px;
  border: 10px solid black;
  box-sizing: border-box;
  /* 實際寬度 = 200px（邊框包含在內） */
}