在盒子模型中，盒子的邊框是其重要的樣式，通過邊框我們可以很方便地看出盒子的長寬以及大小。邊框的特性可以通過邊框線，邊框的寬度及顏色來呈現。
1，邊框線
邊框線指的是邊框線條的樣式，包括實線，虛線，點划線等。其具體的使用如下：
border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset | outset
例：
div { width:300px; height:100px; border-style:solid; ｝
在這里我們將一個長為300px，寬為100px的盒子設置了實線的邊框，在默認的情況下邊框也為實線。
我們也可以為某一個盒子設置多種不同的邊框。此時要注明所要設置的邊框的位置。如：border-top-style 設置上邊框線
border-bottom-style 設置下邊框線
border-left-style 設置左邊框線
border-right-style 設置右邊框線
2，寬度
設置邊框的寬度可以使盒子的邊框更加具有多樣性，也方便了我們的觀察。
border-width : medium | thin | thick | length
同邊框線一樣，要為一個盒子設置多個不同的邊框寬度，要用到下面的語法：
border-top-width 設置上邊框寬度
border-bottom-width 設置下邊框寬度
border-left-width 設置左邊框寬度
border-right-width 設置右邊框寬度
同時邊框寬度的設置可以表現出不同的效果，例：
div{ width:0; height: 0;
border-top: 100px solid #000;
border-right: 100px solid ransparent;
border-left: 100px solid transparent;
}
這里通過將盒子的寬高設置為0，並為其添加邊框的寬度及顏色，從而實現了一個倒三角形圖案的效果。
3，顏色
設置邊框的顏色使用border-color樣式：
border-color : color
例：
div{width:200px;height:200px;border-color:black;border-width:2px;}
其屬性值為一表現顏色的值，即英文單詞或#ffffff和grb（0~255,0~255,0~255）；其不同位置邊框顏色的設置與上面的類似，在此不再贅述。
通常對於邊框樣式的設置我們直接使用簡寫的方式，即：
border : border-width || border-style || border-color
這里面的三個值依次為寬度，線型和顏色，它們的順序可以更改。其中邊框的寬度必須設置值，否則在網頁中看不到效果。其它兩種在不設置的情況下，取默認值，及黑色的實線。
4，圓角
圓角是CSS3中新增加的邊框樣式，通過它，我們可以將盒子模型的外觀設置得更加多樣化。其用法如下：
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
其屬性值有1到4個不等，依次表示的是從左上角開始沿順時針方向旋轉的4個圓角的半徑。
例：
div{ border-radius: 5px 4px 3px 2px; }
同時也可以設置每個圓角的垂直半徑和水平半徑，用斜杠隔開。
例：
div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
在這里對於圓角的半徑做一下具體說明：
我們在確定了盒子模型中的一個角時，以其為中心點，向垂直方向平移的距離即為垂直半徑，向水平方向的位移即為水平半徑。具體的位移方向以盒子的中心方向為正。由此可以確定邊框上的兩個點，這兩個點即為盒子圓角上弧線的起始點與終點。
5，盒子陰影
前面我們了解到文字的陰影效果，作為盒子模型自然也有其陰影效果。具體用法如下：
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
其中后四個值是可選的。通常情況下，我們也為其設置了模糊半徑即陰影顏色，這樣盒子模型的陰影效果更加明顯。
例：
div{ box-shadow: 5px 5px 5px rgba(0, 0, 0, .6); }
對於其中的投影方式，一般不取值的情況下，它是指的向外投影，若對其經行取值，其值應為inset，即向內投影。
例：
div{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6) inset; }
陰影的模糊半徑是表現陰影的效果的度量，其值取得越大，陰影效果表現得越明顯。
６，邊框圖片
在css3中新增了邊框的圖片樣式，這使得邊框的表現效果更加豐富。其具體語法如下：
border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat'>
其中border-image-slice ： 是一個數值或百分比，不需要帶單位（特指px）
例：
.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }
通過邊框圖片的設置，我們可以做到更多邊框的絢麗效果。