HTML Style borderColor用法及代碼示例

DOM樣式的borderColor屬性指定了元素邊框的顏色。它可以顯式給出，從父級繼承，或者默認情況下它將采用默認值。

用法:

獲取邊框顏色屬性：
```
object.style.borderColor
```

設置邊框顏色屬性：

object.style.borderColor = "color | transparent | initial |
inherit"

返回值：它返回一個表示邊框顏色的字符串值。

屬性值

color:它指定相應元素的邊框顏色。黑色是默認顏色。
transparent:它將相應元素的邊框顏色設置為透明。
inherit:如果未為此字段指定任何值，則它將從element的父級繼承。如果沒有父元素，則表示此元素是root，則它采用初始(或默認)值。
initial:此關鍵字將屬性的初始(或默認)值應用於元素。初始值不應與瀏覽器樣式表指定的值混淆。當borderColor設置為initial時，它顯示為黑色(默認)。

例：在此示例中，您將看到如何設置邊框的顏色

用法:
```
borderColor:"red";
```

編程：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            text-align:center; 
            font-size:20px; 
            margin-left:210px; 
            margin-top:20px; 
            border:thick solid red; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="GFG_Function()"> 
        Change border color 
    </button> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <br> 
    <script> 
        function GFG_Function() { 
            document.getElementById("GFG_Div") 
                .style.borderColor = "green"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

用法：
```
borderColor:"red green";
```

Programe:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            text-align:center; 
            font-size:20px; 
            margin-left:210px; 
            margin-top:20px; 
            border:thick solid red; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="GFG_Function()"> 
        Change border color 
    </button> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <br> 
    <script> 
        function GFG_Function() { 
            document.getElementById("GFG_Div") 
                .style.borderColor = "red green"; 
        } 
    </script> 
  
</body> 
  
</html>

Output:
在單擊按鈕之前：

單擊按鈕後：

用法:
```
borderColor:"red green blue";
```

程序：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            text-align:center; 
            font-size:20px; 
            margin-left:210px; 
            margin-top:20px; 
            border:thick solid red; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="GFG_Function()"> 
        Change border color 
    </button> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <br> 
    <script> 
        function GFG_Function() { 
            document.getElementById("GFG_Div") 
                .style.borderColor = "red green blue"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：
用法:
```
borderColor:"red green blue orange";
```

程序：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            text-align:center; 
            font-size:20px; 
            margin-left:210px; 
            margin-top:20px; 
            border:thick solid red; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="GFG_Function()"> 
        Change border color 
    </button> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <br> 
    <script> 
        function GFG_Function() { 
            document.getElementById("GFG_Div") 
                .style.borderColor = "red green blue orange"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

例：在這裏，您將看到透明的用法。它將相應元素的邊框顏色設置為透明。

用法:
```
borderColor = "transparent"
```

編程：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            text-align:center; 
            font-size:20px; 
            margin-left:210px; 
            margin-top:20px; 
            border:thick solid red; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <button onclick="GFG_Function()"> 
        Transparent border color 
    </button> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <br> 
    <script> 
        function GFG_Function() { 
            document.getElementById("GFG_Div") 
                .style.borderColor = "transparent"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

瀏覽器支持：下麵列出了DOM Style borderColor屬性支持的瀏覽器：

穀歌瀏覽器1.0
Internet Explorer 4.0
Mozila Firefox 1.0
Opera 3.5
Safari 1.0

相關用法

注：本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 HTML | DOM Style borderColor Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。