border và border-radius – tạo khung và bo góc đẹp mắt
1. Viền (border) trong CSS để làm gì?
CSS cho phép bạn thêm đường viền (khung) quanh phần tử HTML – từ nút bấm, hình ảnh, tới các thẻ div.
2. Cú pháp cơ bản của border
.box {
border: 2px solid black;
}
Gồm 3 thành phần:
- Độ dày:
1px,2px,5px, v.v. - Kiểu viền:
solid,dashed,dotted,double,groove,none - Màu sắc: dùng tên màu, mã HEX, RGB…
3. Các kiểu viền
| Kiểu viền | Mô tả |
|---|---|
solid | Viền liền |
dashed | Viền đứt đoạn |
dotted | Viền chấm chấm |
double | Hai đường song song |
none | Không viền |
4. Viền từng phía
Bạn có thể áp dụng cho từng cạnh:
border-top: 3px dashed red;
border-bottom: 1px solid gray;
border-left: none;
5. Làm bo góc – border-radius
.box {
border-radius: 10px;
}
- Làm mềm các góc nhọn
- Đơn vị thường dùng:
px,% border-radius: 50%→ tạo hình tròn (nếu chiều ngang và cao bằng nhau)
Cách viết riêng:
border-top-left-radius: 10px;
border-bottom-right-radius: 20px;
6. Viết gộp border và border-radius
.card {
border: 2px solid #9c27b0;
border-radius: 12px;
}
7. Thực hành
style.css
.box-solid {
border: 3px solid #4caf50;
padding: 20px;
margin-bottom: 20px;
}
.box-dashed {
border: 3px dashed #ff9800;
padding: 20px;
margin-bottom: 20px;
}
.box-radius {
border: 2px solid #2196f3;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
}
.box-circle {
width: 150px;
height: 150px;
background: #f44336;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 9 – Border và Border Radius</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box-solid">
Hộp với viền liền màu xanh lá
</div>
<div class="box-dashed">
Hộp với viền đứt nét màu cam
</div>
<div class="box-radius">
Hộp bo góc 15px màu xanh dương
</div>
<div class="box-circle">
Hình tròn
</div>
</body>
</html>
8. Ghi nhớ
| Thuộc tính | Tác dụng |
|---|---|
border | Tạo khung viền quanh phần tử |
border-style | Kiểu viền: solid, dashed… |
border-width | Độ dày của viền |
border-color | Màu viền |
border-radius | Bo tròn góc |
Thảo luận