CSS中的邊框設計（border）常常被用來裝飾頁面。除了基本的線條外，我們還可以設置邊框的顏色、樣式和寬度等。下面是一些常用的邊框樣式。

/* 設置紅色實線邊框 */
border: 2px solid red;
/* 設置黑色虛線邊框 */
border: 2px dashed black;
/* 設置綠色點狀邊框 */
border: 2px dotted green;
/* 設置藍色雙實線邊框 */
border: 4px double blue;
/* 設置淡灰色實線邊框并添加圓角 */
border: 2px solid lightgray;
border-radius: 10px;

此外，我們也可以分別設置邊框各個方向的樣式。例如:

/* 分別設置四個方向的邊框樣式 */
border-top: 2px solid red;
border-right: 2px dashed black;
border-bottom: 2px dotted green;
border-left: 4px double blue;
/* 分別設置四個方向的邊框顏色和寬度 */
border-color: red black green blue;
border-width: 2px 4px 6px 8px;

如果我們想要在一個區塊中設置多個邊框，可以使用偽元素（::before和::after）來模擬。例如:

/* 設置一個白底、框線寬3像素、虛線的矩形區塊 */
.box {
position: relative; /* 使::before和::after相對于.box定位 */
display: inline-block; /* 將.box設置為內聯塊元素 */
padding: 1em; /* 設置內邊距 */
background-color: white; /* 設置背景為白色 */
border: 3px dashed gray; /* 設置外層框線為虛線 */
}
/* 模擬內層框線1 */
.box::before {
content: ''; /* 必須設置content，否則::before不會顯示 */
position: absolute; /* 設置定位方式為絕對定位 */
top: -6px; /* 向上偏移6像素 */
left: -6px; /* 向左偏移6像素 */
width: calc(100% + 12px); /* 寬度為100%加上2個6像素邊框寬度 */
height: calc(100% + 12px); /* 寬度為100%加上2個6像素邊框寬度 */
border: 3px solid green; /* 設置邊框為綠色實線 */
}
/* 模擬內層框線2 */
.box::after {
content: ''; /* 必須設置content，否則::before不會顯示 */
position: absolute; /* 設置定位方式為絕對定位 */
bottom: -6px; /* 向下偏移6像素 */
right: -6px; /* 向右偏移6像素 */
width: calc(100% + 12px); /* 寬度為100%加上2個6像素邊框寬度 */
height: calc(100% + 12px); /* 寬度為100%加上2個6像素邊框寬度 */
border: 3px solid blue; /* 設置邊框為藍色實線 */
}

以上介紹了幾種邊框設計的方法和樣式，當然在實際運用當中，我們還可以根據具體需求靈活設置邊框樣式。