HTML DIV 區塊除了可以當容器使用或用來做網頁排版之外，本身也可以透過增加邊框效果來美化視覺效果，在這裡我們要用到的是 CSS 的邊框設計技巧，也就是 border 屬性，透過 border 屬性可以很輕易的替 HTML 的 DIV 區塊增加四個邊框，甚至分別替上邊框、右邊框、下邊框或左邊框設計不同的風格效果都可以輕鬆做到，先來看看 border 屬性的基本語法再套用到範例看效果。
CSS border 邊框屬性基本語法
border: 邊框寬度 邊框顏色 邊框樣式;
基本的 border 屬性可以透過邊框的寬度、顏色以及樣式來設計不同的視覺效果，這幾個參數的設計範例請參閱以下內容
如果你對以上的 borde 屬性非常了解，可以直接看範例的套用效果
替 HTML DIV 區塊增加邊框效果範例
<div style="border:2px red solid;">紅色的實線邊框</div>
<div style="border:2px blue dashed;">藍色的虛線邊框</div>
<div style="border:4px orange solid;">橘色的粗實線邊框</div>
<div style="border:2px blue dashed;">藍色的虛線邊框</div>
<div style="border:4px orange solid;">橘色的粗實線邊框</div>
範例的呈現效果
紅色的實線邊框
藍色的虛線邊框
橘色的粗實線邊框
從範例的三個不同邊框樣式可以看到，透過 CSS border 屬性可以很輕易的替 HTML DIV 區塊設計出不同風格的邊框效果，無論是顏色、粗細還是邊框要實現或虛線都可以很輕易的做出來，各位自己嘗試看看。
延伸閱讀