我們都知道邊框有上下左右四條邊，在上一節我們學習的是四條邊框的整體樣式。那如果我們想要對上下左右這四條邊進行單獨設置，那該怎麼辦呢？
在CSS中，我們可以分別針對上下左右四條邊框設置單獨的樣式。
border-top-width:1px;
border-top-style:solid;
border-top-color:red;
簡潔寫法：border-top:1px solid red;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:orange;
簡潔寫法：border-bottom:1px solid orange;
border-left-width:1px;
border-left-style:solid;
border-left-color:blue;
簡潔寫法：border-left:1px solid blue;
border-right-width:1px;
border-right-style:solid;
border-right-color:red;
簡潔寫法：border-right:1px solid green;
從上面介紹，我們知道無論是邊框整體樣式，還是局部樣式，我們都需要設置邊框的3個屬性：寬度、外觀、顏色。
大家如果忘記邊框要設置哪些屬性也沒關系，因為在Visual Studio中有代碼自動提示功能。我們多練習就會記住了。
舉例1：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:100px; /*div元素寬為100px*/
height:60px; /*div元素高為60px*/
border-top:1px solid red; /*上邊框樣式*/
border-right:1px solid orange; /*右邊框樣式*/
border-bottom:1px solid blue; /*下邊框樣式*/
border-left:1px solid green; /*左邊框樣式*/
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
舉例2：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:100px; /*div元素寬為100px*/
height:60px; /*div元素高為100px*/
border:1px solid gray; /*邊框整體樣式*/
border-bottom:0px; /*去除下邊框*/
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“border-bottom:0px;”是把下邊框寬度設置為0，這樣下邊框就沒有寬度了，因此去除了下邊框。很多人新手覺得奇怪，難道不需要設置邊框的外觀和顏色如“border-bottom:0px solid gray;”嗎？實際上，這是省略寫法。既然我們都不需要這一條邊框了，還設置邊框的外觀和顏色搞毛用呢？
去除邊框可以使用“border-bottom:0px”和“border-bottom:none”兩種方法。這兩者效果是等價的。