以邊界 borders 來說，常用的筆者在此分為三大類 border、outline、ring，讓我們開始吧！

一、Border

• Border Width
  border 的寬度分為全周、雙邊和單邊，border- 可接任一數字代表全周，border-x或y- 接任一數字代表雙邊，border-t/r/b/l- (top/right/bottom/left)接任一數字代表單邊。
  
• Border Radius
  radius 以 rounded 取名，同樣也具備各種方向，以單邊和雙邊圓角來說，rounded-t- 為元素上方 (左上和右上) 圓角、rounded-tl- 為元素左上方 (top-left) 圓角以及效果接近於 border-radius: 50%; 的全圓角。
  
• Border Style
  
• Custom
  以上除了 border style 以外都可加入客製化數值以滿足專案需求，可在 theme 物件內容或是 extend 物件內容新增都可以，筆者習慣在 extend 新增，這樣一來不會去覆蓋到原先的樣式。

tailwind.config.js

    extend: {
      borderRadius: {
        DEFAULT: '4px',
        'large': '12px'
      },
      borderWidth: {
        DEFAULT: '1px',
        '10': '10px',
      },
    },

二、Outline

outline 除了只有全周可以使用之外，不同於 border ，outline 在使用上必須記得一定要給上 outline style，即便只是 outline-style: solid;

三、Ring

ring 是使用 box-shadow 的方式模擬另一種 outline 的顯示，最大的差別在於雖然 outline 和 ring 都有 offset 的樣式可以使用，但是 ring 的 offset 同時可以指定顏色達成雙色的效果。

以上就是今天的 border 篇～因為 tailwind 的樣式客製化幾乎都大同小異，所以筆者在這篇只抓了其中一個做示範，配色上傷眼先說聲抱歉了