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. Chúng tôi có thể tạo kiểu cho các mặt riêng lẻ bằng cách sử dụng các thuộc tính dành riêng cho từng bên như border-top, border-right, v.v.
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>
div {
border-style: solid;
margin: auto;
padding: 5px;
border-radius: 50%;
}
#main {
height: 100px;
width: 100px;
border-left: 12px ridge goldenrod;
border-right: 12px ridge goldenrod;
}
#main > div {
line-height: 12px;
height: 30px;
width: 10px;
padding: 27px 20px;
border-top: 6px groove crimson;
border-bottom: 6px ridge crimson;
}
</style>
</head>
<body>
<div id="main">
<div>i see you</div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 60%;
margin: auto;
padding: 20px 45px;
border-top-width: 1.4em;
border-top-style: solid;
border-top-color: violet;
border-radius: 85px 85px 0 0;
color: black;
font-size: 1.3em;
background-image: url("https://www.tutorialspoint.com/images/css.png");
}
</style>
</head>
<body>
<p>CSS is used to control the style of a web document in a simple way. It handles the look and feel part of a web page.</p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
