在網頁設計中，頁面布局是至關重要的一個方面。使用CSS來創建一個頁面布局可以使網頁的外觀更加美觀，易于導航，同時也能增強用戶體驗。在創建一個頁面布局時，相信大家經常需要添加一個邊界，這篇文章將教你如何通過CSS來添加邊界。 首先，我們需要了解CSS中關于邊框的屬性。CSS中有四個主要的邊框屬性，分別是border-width、border-style、border-color和border-radius。這些屬性可以組合在一起來創建一個完整的邊框。讓我們來看一下下面的示例，用三個屬性border-width、border-style、border-color來定義邊框的樣式。

.border-example {
border-width: 2px;
border-style: solid;
border-color: black;
}

在上面的代碼中，我們構建了一個類名為border-example的樣式，其中border-width用于定義邊框的寬度，border-style用于定義邊框的樣式，border-color用于定義邊框的顏色。這個樣式將為我們創建一個黑色的邊框，寬度為2像素。 接下來，我們可以使用這個樣式在我們的HTML元素中應用邊框，例如：

這是一個帶有邊框的段落。

如果你想要添加圓角邊框的話，可以使用border-radius屬性。這個屬性用于設置邊框角的圓角。讓我們來看一下下面的示例：

.border-example {
border-width: 2px;
border-style: solid;
border-color: black;
border-radius: 5px;
}

在上面的代碼中，我們添加了border-radius屬性，并設置其值為5個像素。這個樣式將為我們創建一個帶有圓角邊框的黑色邊框，寬度為2像素。 最后，我們需要注意的一點是，如果你想要添加邊框到一個塊級元素中，例如一個div標簽或一個p標簽，你需要將它的display屬性設置為block，以確保該元素充滿整個父容器的寬度，這樣邊框才能正確地顯示。讓我們來看一下下面的示例：

.border-example {
display: block;
border-width: 2px;
border-style: solid;
border-color: black;
border-radius: 5px;
}

在這個樣式中，我們添加了display: block屬性，以確保該元素是一個塊級元素，可以充滿整個父容器的寬度。這個樣式將為我們創建一個帶有圓角邊框的黑色邊框，寬度為2像素的段落。 總之，在創建一個頁面布局時，邊框可以為你的設計增添風格，增強頁面的整體美觀性和可讀性。上述的示例僅為基礎示例，你可以根據需求和喜好自由定制。