Thuộc tính kiểu đường viền CSS được sử dụng để chỉ định kiểu đường viền cho một phần tử. Chúng tôi cũng có thể xác định kiểu đường viền cho các cạnh riêng lẻ bằng cách sử dụng các thuộc tính kiểu đường viền trên cùng, kiểu đường viền bên phải, kiểu đường viền bên trái và kiểu đường viền bên phải.
Cú pháp
Cú pháp của thuộc tính đường viền CSS như sau -
Selector {
border: /*value*/
} Các ví dụ sau minh họa thuộc tính kiểu đường viền CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type {
margin: 5% 0 0 20%;
}
div {
height: 40px;
width: 40px;
margin: auto;
padding: 10px;
border-style: solid;
display: flex;
float: left;
}
#d1 {
border-style: double dashed;
}
#d2 {
border-style: dotted;
}
</style>
</head>
<body>
<div></div>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
float: left;
height: 80px;
width: 60px;
border-style: ridge;
border-width: 1.2em;
border-color: midnightblue;
border-bottom-left-radius: 50%;
}
div + div {
height: 120px;
width: 80px;
border-style: double;
border-color: seagreen;
border-right-width: 180px;
border-bottom-right-radius: 100%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
