Thuộc tính Biên (Border)
Các thuộc tính CSS liên quan đến viền (border). Bạn sẽ học cách định dạng viền của phần tử, từ độ rộng, kiểu dáng, màu sắc đến việc làm tròn góc.
Thuộc tính Biên (Border)
1. Thuộc tính border-width
- Mô tả: Xác định độ dày của viền.
-
Cú pháp:
div { border-width: 5px; } -
Các giá trị phổ biến:
- Kích thước cố định:
1px,5px,10px, ... - Giá trị đặc biệt:
thin,medium,thick.
- Kích thước cố định:
2. Thuộc tính border-style
- Mô tả: Định dạng kiểu dáng của viền.
-
Cú pháp:
div { border-style: solid; } -
Các giá trị:
-
none: Không có viền. -
solid: Đường viền liền mạch. -
dotted: Đường viền chấm nhỏ. -
dashed: Đường viền gạch ngang. -
double: Đường viền đôi. -
groove: Hiệu ứng khắc chìm. -
ridge: Hiệu ứng khắc nổi. -
inset,outset: Hiệu ứng 3D.
-
3. Thuộc tính border-color
- Mô tả: Xác định màu sắc của viền.
-
Cú pháp:
div { border-color: red; } -
Các giá trị:
- Tên màu:
red,blue, ... - Mã màu HEX:
#ff5733. - Mã màu RGB:
rgb(255, 255, 255).
- Tên màu:
4. Thuộc tính border-radius
- Mô tả: Tạo các góc bo tròn cho viền.
-
Cú pháp:
div { border-radius: 10px; } -
Các giá trị:
- Kích thước cố định:
10px,50%. -
50%: Biến phần tử thành hình tròn nếu chiều rộng và chiều cao bằng nhau.
- Kích thước cố định:
5. Thuộc tính border rút gọn
-
Mô tả: Gộp các thuộc tính
border-width,border-style, vàborder-colorvào một dòng. -
Cú pháp:
div { border: 5px solid red; }
Thực hành
1. Yêu cầu
Tạo một trang HTML với các khối có viền được định dạng theo các kiểu dáng khác nhau:
- Sử dụng viền dày, màu sắc và kiểu dáng đa dạng.
- Làm tròn các góc viền của phần tử.
2. Hướng dẫn
File HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thuộc tính Biên trong CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box solid-border">Viền liền mạch</div>
<div class="box dotted-border">Viền chấm nhỏ</div>
<div class="box dashed-border">Viền gạch ngang</div>
<div class="box rounded-border">Viền bo tròn</div>
</body>
</html>
File CSS (styles.css):
/* Định dạng chung cho các khối */
.box {
width: 300px;
height: 100px;
margin: 20px auto;
padding: 10px;
text-align: center;
line-height: 100px;
font-size: 18px;
font-family: Arial, sans-serif;
}
/* Viền liền mạch */
.solid-border {
border: 5px solid blue;
}
/* Viền chấm nhỏ */
.dotted-border {
border: 3px dotted green;
}
/* Viền gạch ngang */
.dashed-border {
border: 4px dashed orange;
}
/* Viền bo tròn */
.rounded-border {
border: 5px solid red;
border-radius: 20px;
}
Kết luận
Bài học này cung cấp nền tảng quan trọng để bạn có thể sáng tạo các kiểu viền độc đáo trong thiết kế giao diện. Hãy thực hành để hiểu rõ hơn cách phối hợp các thuộc tính viền trong các dự án thực tế.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com