CSS Property: border-color
[this page | pdf | back links]
The CSS (CSS1) border-color property sets the colour
of an element’s four borders. The individual border colours can be set
separately using border-bottom-color,
border-left-color,
border-right-color
and border-top-color.
As with some other aggregate edge properties, up to four parameter values can
be supplied (and if more than one is supplied then the properties are applied
to individual borders as described here).
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
color
|
A CSS colour
|
|
transparent
|
(default value).
Transparent
|
|
Default Value:
|
The current CSS colour of the element
|
|
JavaScript syntax:
|
e.g. object.style.borderColor="red blue"
|
|
Inherited:
|
No
|
|
Animatable:
|
Yes
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; border: thin solid black;}
p.x1 {border-color: red;}
</style>
</head>
<body>
<p>1. Element with default property</p>
<p class="x1">2. Element set using in-file HTML style</p>
<p id="x2">3. Element set using JavaScript</p>
<p style="border-color: red black yellow;">
4. impact of using a border-color parameter that involves three colors, red, black, yellow</p>
<script>
document.getElementById("x2").style.borderColor = "red";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderColor() {
var x = document.createElement("DIV"); x.style.borderColor = "red"; return (window.getComputedStyle(x, null).borderColor == "red");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties