Chúng ta có thể xác định màu đường viền và màu đường viền cho một phần tử. Không giống như đường viền, đường viền không chiếm bất kỳ khoảng trống nào. Thuộc tính màu đường viền được sử dụng để đặt màu đường viền của một phần tử và thuộc tính màu đường viền được sử dụng để đặt màu đường viền của nó.
Cú pháp
Cú pháp cho thuộc tính màu viền và màu đường viền CSS như sau -
/*for setting border-color*/
Selector {
border-color: /*value*/
}
/*for setting outline-color*/
Selector {
outline-color: /*value*/
} Các ví dụ sau minh họa thuộc tính CSS border-color và outline-color -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: limegreen crimson;
position: absolute;
outline-width: 5px;
outline-style: ridge;
outline-color: orange;
top: 15px;
border-radius: 50%;
}
div {
margin: auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
outline-color: black;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-width: 5px;
border-style: ridge;
border-color: lightblue;
outline-style: solid;
outline-color: darkviolet;
}
</style>
</head>
<body>
<h2>Exams Timings</h2>
<p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
