CSS的邊框樣式是很重要的一個設計元素，通過設置邊框樣式，可以讓網頁元素的外觀更加美觀。而針對不同邊框的方向，CSS也提供了多種不同的邊框樣式。

首先，讓我們先來看看如何設置邊框的樣式類型。

border-style: solid;  //實線
border-style: dotted;  //點狀線
border-style: dashed;  //虛線
border-style: double;  //雙實線
border-style: groove;  //3D凹槽
border-style: ridge;   //3D凸起
border-style: inset;   //3D內陰影
border-style: outset;  //3D外陰影
border-style: none;    //無邊框

接下來，我們來看看如何針對不同方向的邊框設置不同的樣式。在CSS中，可以使用4個方向的縮寫或單獨設置某一方向的邊框。

/* 設置4個方向的邊框 */
border-style: solid dotted dashed double;
/* 單獨設置某一方向的邊框 */
border-top-style: solid;    //頂部邊框
border-right-style: dotted; //右邊邊框
border-bottom-style: dashed;//底部邊框
border-left-style: double;  //左邊邊框

最后，我們可以通過設置邊框顏色和寬度來完善邊框樣式。下面是一個例子，展示了針對每個方向不同的邊框樣式。

div {
border-top-color: #ff0000;    //頂部邊框紅色
border-right-color: #00ff00; //右邊邊框綠色
border-bottom-color: #0000ff;//底部邊框藍色
border-left-color: #ffff00;  //左邊邊框黃色
border-top-style: solid;     //頂部實線
border-right-style: dotted;  //右邊點狀線
border-bottom-style: dashed; //底部虛線
border-left-style: double;   //左邊雙實線
border-width: 2px;           //邊框寬度2個像素
}

通過上述例子，我們可以輕松地為網頁元素添加豐富多彩的邊框樣式，大大提升網頁的設計美感。