Thuộc tính border là gì?
Thuộc tính border dùng để định dạng đường viền cho thành phần trong css. Đương viền trong css có 3 kiểu để định dạng border color, border style và border width. Dưới đây sẽ giới thiệu cùng các bạn tổng hợp các thuộc tính border trong css.
 |
Thuộc tính border là gì trong css |
Cấu trúc chung:
tag { Thuộc tính: giá trị; }
Thuộc tính Border Color
Định dạng màu sắc cho đường viềnVí dụ:
<html>
<head>
<style>
h1 { border-color: #000000;}
h2 { border-color: rgb(255,0,0);}
h3 { border-color: red;}
</style>
<body>
<h1> ví dụ về thuộc tính Border Color </h1><br/>
<h2> ví dụ về thuộc tính Border Color </h2><br/>
<h3> ví dụ về thuộc tính Border Color </h3><br/>
</body>
</html>
Border Style
Định dạng hiển thị kiểu đường viền
Ví dụ cụ thể
<!DOCTYPE html><html>
<head>
<style>
.vidu1 { border: none;}
.vidu2 { border: hidden;}
.vidu3 { border: dotted;}
.vidu4 { border: dashed;}
.vidu5 { border: solid;}
.vidu6 { border: double;}
.vidu7 { border: groove;}
.vidu8 { border: ridge;}
.vidu9 { border: inset;}
.vidu10 { border: outset;}
.vidu11 { border: inherit;}
</style>
<body>
<p class="vidu1"> Xác định thành phần sẽ không có đường viền. </p><br/>
<p class="vidu2"> Giống như giá trị none, nhưng được dùng cho table. </p><br/>
<p class="vidu3"> Xác định đường viền cho thành phần là dấu chấm (dotted). </p><br/>
<p class="vidu4"> Xác định đường viền cho thành phần là gạch ngang (dashed). </p><br/>
<p class="vidu5"> Xác định đường viền cho thành phần là đường thẳng nét (solid). </p><br/>
<p class="vidu6"> Xác định đường viền cho thành phần là 2 đường thẳng nét (double). </p><br/>
<p class="vidu7"> Xác định đường viền cho thành phần là đường rãnh (groove). </p><br/>
<p class="vidu8"> Xác định đường viền cho thành phần là đường chóp (ridge). </p><br/>
<p class="vidu9"> Xác định đường viền cho thành phần là đường bóng bên trong (inset). </p><br/>
<p class="vidu10"> Xác định đường viền cho thành phần là đường bóng bên ngoài (outset). </p><br/>
<p class="vidu11"> Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). </p><br/>
</body>
</html>
Thuộc tính border width
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
#vidu { border-width: 5px; border-color: #000000; border-style: solid}
</style> </head>
<body>
<p id="vidu"> Xác định bề dày của đường viền. </p><br/>
</body>
</html>
Khai báo tắt và kết hợp giữa border color, border style, border width
Cách viết thông thường
.vidu { border-color: #000000; border-style: solid; border-width: 5px}
Bạn có thể viết gọn hơn lại như sau:
.vidu { border: 5px solid #000}
Định dạng border (Đường viền) trên, dưới, phải, trái
- Đường viền trên: border-top
- Đường viền dưới: border-bottom
- Đường viền trái: border-left
- Đường viền phải: border-right
Ví dụ cụ thể:
<!DOCTYPE html>
<html>
<head>
<style>
#duongvientren { border-top: 2px solid #ff0000;}
#duongvienduoi { border-bottom: 2px solid #ff0000;}
#duongvientrai { border-left: 2px solid #ff0000;}
#duongvienphai { border-right: 2px solid #ff0000;}
</style>
</head>
<body>
<p id="duongvientren"> Đường viền trên </p><br/>
<p id="duongvienduoi"> Đường viền dưới </p><br/>
<p id="duongvientrai"> Đường viền trái </p><br/>
<p id="duongvienphai"> Đường viền phải </p><br/>
</body>
</html>
Trên đây là các thuộc tính border (đường viền) trong css cụ thể nhất chúc các bạn học thành công css nhé.
