Thuộc tính đường viền CSS được sử dụng để xác định thuộc tính đường viền cho một phần tử. Nó là cách viết tắt của chiều rộng đường viền, kiểu đường viền và màu đường viền. Đường viền cho các mặt riêng lẻ có thể được tạo kiểu và bán kính đường viền cũng có thể được chỉ định.
Mặt khác, đường viền CSS không chiếm dung lượng và được hiển thị xung quanh đường viền nếu được đặt. Nó hỗ trợ bù đắp. Hơn nữa, chúng tôi không thể xác định xem các bên riêng lẻ có nên có một dàn ý hay không.
Theo mặc định, cả đường viền và đường viền đều không được hiển thị.
Cú pháp
Cú pháp cho thuộc tính đường viền và đường viền CSS như sau -
Selector {
border: /*value*/
outline: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính đường viền và đường viền CSS -
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
