Thuộc tính border-color
Thuộc tính border-color : xác định màu sắc của đường viền.
<html>
<head>
<style type="text/css">
p {
border: solid;
border-color: red;
}
</style>
</head>
<body>
<p>border-color</p>
</body>
</html>
border-color
Thuộc tính border-style
Thuộc tính border-style : xác định hình dạng của đường viền.
<html>
<head>
<style type="text/css">
p {
border-style: dotted;
}
</style>
</head>
<body>
<p>border-style</p>
</body>
</html>
border-style
Các loại hình dạng cho border:
| Ví dụ | Mô tả | Hiển thị |
|---|---|---|
| border-style: none; | Xác định thành phần sẽ không có đường viền. | Đường viền hiển thị |
| border-style: hidden; | Giống như giá trị none, nhưng được dùng cho table. | Đường viền hiển thị |
| border-style: dotted; | Xác định đường viền cho thành phần là dấu chấm (dotted). | Đường viền hiển thị |
| border-style: dashed; | Xác định đường viền cho thành phần là gạch ngang (dashed). | Đường viền hiển thị |
| border-style: solid; | Xác định đường viền cho thành phần là đường thẳng nét (solid). | Đường viền hiển thị |
| border-style: double; | Xác định đường viền cho thành phần là 2 đường thẳng nét (double). | Đường viền hiển thị |
| border-style: groove; | Xác định đường viền cho thành phần là đường rãnh (groove). | Đường viền hiển thị |
| border-style: ridge; | Xác định đường viền cho thành phần là đường chóp (ridge). | Đường viền hiển thị |
| border-style: inset; | Xác định đường viền cho thành phần là đường bóng bên trong (inset). | Đường viền hiển thị |
| border-style: outset; | Xác định đường viền cho thành phần là đường bóng bên ngoài (outset). | Đường viền hiển thị |
| border-style: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | Đường viền hiển thị |
Thuộc tính border-width
Thuộc tính border-width : xác định bề dày của đường viền.
<html>
<head>
<style type="text/css">
p {
border: solid;
border-width: 5px;
}
</style>
</head>
<body>
<p>border-width</p>
</body>
</html>
border-width
Thuộc tính border-top
Thuộc tính border-top : xác định đường viền bên trên.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.
<html>
<head>
<style type="text/css">
p {
border-top: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-top</p>
</body>
</html>
border-top
Thuộc tính border-right
Thuộc tính border-right : xác định đường viền bên phải.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.
<html>
<head>
<style type="text/css">
p {
border-right: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-right</p>
</body>
</html>
border-right
Thuộc tính border-bottom
Thuộc tính border-bottom : xác định đường viền bên dưới.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.
<html>
<head>
<style type="text/css">
p {
border-bottom: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-bottom</p>
</body>
</html>
border-bottom
Thuộc tính border-left
Thuộc tính border-left : xác định đường viền bên trái.
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.
<html>
<head>
<style type="text/css">
p {
border-left: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border-left</p>
</body>
</html>
border-left
Thuộc tính border
Thuộc tính border : xác định đường viền các vị trí xung quanh (tổng hợp của border-top, border-right, border-bottom, border-left).
Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.
<html>
<head>
<style type="text/css">
p {
border: #ff0000 solid 2px;
}
</style>
</head>
<body>
<p>border</p>
</body>
</html>
border