邊框

善用邊框對於元素有很好的輔助效果，像是方形的方塊加上圓角可以使元素看起來更圓滑，input 標籤加上 :foucs改變邊框顏色讓使用者清楚目前點擊的元素。

邊框半徑（Border Radius）

全部圓角

• rounded
• rounded-md
• rounded-lg
• rounded-xl
• rounded-2xl
• rounded-3xl
• rounded-full

藉由 rounded-{size}，改變元素四個方向的圓角，當長寬一樣時，使用 rounded-full 可以做出一個圓形，十分泛用，舉個例子：

<div class="... rounded-full"></div>

.rounded-full {
  border-radius: 9999px;
}

從上方可以得知，rounded-full 能做出圓形。

分別修飾圓邊

• rounded-t
• rounded-r
• rounded-b
• rounded-l

藉由 rounded-{t|r|b|l}-{size}，改變元素兩個方向的圓角，舉個例子：

<div class="... rounded-t-lg"></div>

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

從上方可以得知，rounded-t-lg 讓上邊有圓角的效果。

分別圓角

• rounded-tl
• rounded-tr
• rounded-br
• rounded-bl

藉由 rounded-{tl|tr|br|bl}-{size}，改變元素單個圓角，舉個例子：

<div class="... rounded-bl-lg"></div>

.rounded-bl-lg {
  border-bottom-left-radius: 0.5rem;
}

從上方可以得知，rounded-bl-lg 讓下邊的左側有圓角的效果。

邊框寬度（Border Width）

全部邊框

• border-0
• border-2
• border-4
• border-8
• border

藉由 border-{width}，能為元素所有邊加上邊框，舉個例子：

<div class="... border-2"></div>

.border-2 {
  border-width: 2px;
}

個別邊框

藉由 border-{side}-{width} ，能為元素一側加上邊框，舉個例子：

<div class="... border-t-4"></div>

.border-t-4 {
  border-top-width: 4px;
}

水平面與垂直面邊框

藉由 border-{x|y}-{width} ，能為元素兩側加上邊框，舉個例子：

<div class="... border-x-4"></div>

.border-x-2 {
    border-left-width: 4px;
    border-right-width: 4px;
}

邊框顏色（Border Color）

全部邊框顏色

藉由 border-{color} 調整邊框顏色，Tailwind CSS 預設許多顏色，詳細可查閱 Tailwind CSS - Colors。
調整邊框顏色時，也可以調整邊框的透明度，只要在邊框顏色後方加上 /透明度 即可，舉個例子：

<div class="... border-red-700/75"></div>

.border-red-700\/75 {
  border-color: rgb(185 28 28 / 0.75);
}

個別邊框顏色

藉由 border-{side}-{color} ，能為元素一側加上邊框顏色，舉個例子：

<div class="... border-t-red-700"></div>

.border-t-red-700 {
  --tw-border-opacity: 1;
  border-top-color: rgb(185 28 28 / var(--tw-border-opacity));
}

水平面與垂直面邊框顏色

藉由 border-{x|y}-{color} ，能為元素兩側加上邊框顏色，舉個例子：

<div class="... border-x-red-700"></div>

.border-x-red-700 {
  --tw-border-opacity: 1;
  border-left-color: rgb(185 28 28 / var(--tw-border-opacity));
  border-right-color: rgb(185 28 28 / var(--tw-border-opacity));
}

邊框樣式（Border Style）

• border-solid
• border-dashed
• border-dotted
• border-double
• border-hidden
• border-none

藉由 border-{style} ，能調整邊框樣式，border-solid 較常使用，舉個例子：

<div class="... border-solid"></div>

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

codepen 連結

本日重點

1. rounded-full 可以做出一個圓。
2. 嘗試調整 border 的圓角、寬度、顏色與風格。

參考

• Tailwind CSS 官網