Các thuộc tính Border (Viền) trong CSS

Thuộc tính border trong CSS dùng để định nghĩa các thuộc tính viền cho phần tử. Là shorthand cho border-width, border-style và border-color. Có thể tạo kiểu riêng cho từng cạnh: border-top, border-right, v.v.

Cú pháp

Selector { border: /*giá trị*/ }

Ví dụ 1: Border tròn với border-radius

<!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>

Kết quả

Ví dụ 2: Gradient border với border-image

<!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 dùng để kiểm soát kiểu dáng tài liệu web đơn giản. Xử lý phần look and feel của trang web.</p>
</body>
</html>

Kết quả

Tóm tắt:

• border: width style color (shorthand)
• border-radius bo góc (1-4 giá trị)
• border-image dùng hình ảnh làm viền
• Mỗi cạnh: border-top, border-right, border-bottom, border-left
• Style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset