邊框樣式

border-style定義元素的四個邊框樣式，可選值：

none : 默認值。無邊框

hidden : 隱藏邊框

dotted :點線邊框

dashed : 虛線邊框

solid :實線邊框

double : 雙線邊框。兩條單線與其間隔的和等於 border-width 值

groove : 3D凹槽 ，效果取決於 border-color 的值

ridge : 3D凸槽 ，效果取決於border-color值

inset : 3D凹邊 ，效果取決於 border-color 的值

outset : 3D凸邊， 效果取決於 border-color 的值

如果border-styler設置全部四個參數值，將按上－右－下－左的順序作用於四個邊框。如果只設置一個，將用於全部的四條邊。如果設置兩個值，第一個用於上－下，第二個用於左－右。如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。

div {border-style: dotted}

四個邊框的樣式將為點線

div {border-style: dotted dashed}

上下邊框的樣式將為點線(dotted），左右邊框的樣式將為虛線(dashed)

div {border-style: dotted dashed solid}

上下邊框的樣式將為點線(dotted）, 左右邊框的樣式將為虛線(dashed), 下邊框的樣式將為實線(solid)

div {border-style: dotted dashed solid double}

上邊框的樣式將為點線(dotted）,右邊框的樣式將為虛線(dashed), 下邊框的樣式將為實線(solid), 左邊框的樣式將為雙線( double)

注意:如果 border-width 設置為 0 ，border-style屬性將失去作用。

邊框的顏色(border-color)

border-color定義元素的四個邊框顏色，可選值：

• color。請參閱CSS顏色
• transparent，透明

如果border-color設置全部四個參數值，將按上－右－下－左的順序作用於四個邊框。如果只設置一個，將用於全部的四條邊。如果設置兩個值，第一個用於上－下，第二個用於左－右。如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。

table {border-color: red}

四個邊框的顏色將為紅色（red）

table {border-color: red green}

上下邊框的顏色將為紅色（red），左右邊框的顏色將為綠色（green）

table {border-color: red green blue}

上邊框的顏色將為紅色，左右邊框的顏色將為綠色（green）下邊框的顏色將為藍色（blue）

table {border-color: red green blue yellow}

上邊框的顏色將為紅色，右邊框的顏色將為綠色（green），下邊框的顏色將為藍色（blue），左邊框的顏色將為黃色（green）

注意: 只設置 "border-color" 屬性將看不到效果，須要先設置 "border-style" 屬性

邊框寬度(border-width)

border-width定義元素的四個邊框寬度,可選值：

• medium : 默認值。默認寬度
• thin : 小於默認寬度
• thick : 大於默認寬度
• length :長度值,不可為負值。請參閱CSS長度單位

如果border-width設置全部四個參數值，將按上－右－下－左的順序作用於四個邊框。如果只設置一個，將用於全部的四條邊。如果設置兩個值，第一個用於上－下，第二個用於左－右。如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。

注意:如果 border-style 設置為 none ，border-width屬性將失去作用。先設置 border-style屬性再設置border-width屬性。

邊框屬性(border)

border是一個綜合屬性，定義元素的四個邊框的寬度、樣式和顏色。句法為：

border{border-width ;border-style ;border-color;}

例如：

p{ border: thin dotted #00FF00;}

span{ border: solid #0000FF}

上邊框(border-top)

border-top單獨定義元素的上邊框，句法為：

border-top : {border-width ;border-style ;border-color; }

例如：

table{border-top: thin dotted #00FF00}

table{border-top: solid #0000FF}

上邊框樣式（border-top-style）

border-top-style單獨定義元素的上邊框的樣式。如：

h1{?border-top-style: solid}

上邊框顏色（border-top-color）

border-top-color單獨定義元素的上邊框的顏色.如：

p
{
border-style: solid;
border-top-color: #ff0000
}

div {
border-style: solid;
border-top-color: rgb(255,0,0)
}

注意: 只設置 "border-color" 屬性將看不到效果，須要先設置 "border-style" 屬性

上邊框寬度(border-top-width)

border-top-width單獨定義元素的上邊框寬度,.如：

p{border-style: solid;border-top-width: thin;}
div{?border-style: solid;border-top-width: 0.5cm}

注意:先設置 border-style屬性，再設置border-width屬性。

同理，還有：

• 右邊框屬性
  border-right
  border-right-width
  border-right-style
  border-right-color
• 下邊框屬性
  border-bottom
  border-bottom--width
  border-bottom--style
  border-bottom--color
• 左邊框屬性
  border-left
  border-left-width
  border-left-style
  border-left-color

div {
border-top-color: red;
border-bottom-color: RGB(223, 94, 77);
border-right-color:blue;
border-left-color: black;
}

p{
border-top-style: double;
border-bottom-style: groove;
border-left-style: dashed;
border-right-style: dotted;
}