Tạo và tạo kiểu viền (Borders) bằng CSS

Chúng ta có thể định nghĩa viền cho phần tử và tạo kiểu cho chúng bằng CSS. Thuộc tính border là shorthand cho border-width, border-style, border-color. Hơn nữa, hình ảnh có thể được chỉ định làm viền.

Cú pháp

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

Ví dụ 1: Border image với TensorFlow logo

<!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 là framework machine learning open source cho mọi developer. Dùng cho ML và deep learning.</p>
</body>
</html>

Kết quả

Ví dụ 2: Border gradient phức tạp, border-radius bất đối xứng

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

Kết quả

Kỹ thuật nâng cao:

• border-image-source, slice, width, outset, repeat
• border-radius 4 giá trị: top-left, top-right, bottom-right, bottom-left
• border-radius 8 giá trị (với /): horizontal / vertical radii
• Gradient border: dùng border-image: linear-gradient(...) với border-width và border-style: solid