Chúng ta có thể xác định đường viền cho một phần tử và tạo kiểu cho chúng bằng cách sử dụng CSS. 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. Hơn nữa, hình ảnh có thể được chỉ định làm đường viền.
Cú pháp
Cú pháp của thuộc tính đường viền CSS như sau -
Selector {
border: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính CSS border -
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 70px solid transparent;
margin: 15px;
padding: 3px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;
background-color: beige;
}
</style>
</head>
<body>
<p>TensorFlow is an open source machine learning framework for all developers. It is used for implementing machine learning and deep learning applications.</p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#d1 {
margin: auto;
width: 60%;
border: 4px solid sienna;
padding: 10px;
background-image: linear-gradient(133deg, #a4c888, #2343e2, #33b329, #d10373);
border-radius: 55px 100px 2px 95px;
}
#d2 {
border: 1.5px solid rosybrown;
padding: 10px;
border-radius: 205px 500px;
}
img {
border-radius: 3% 50%;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<img src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg" >
</div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
