Đọc border theo từng thành phần
```css
p { border: 3px dashed teal; }
```
border là cách viết gộp. Trong mẫu, 3px là độ rộng, dashed là kiểu nét đứt và teal là màu. Có thể dùng riêng border-width, border-style và border-color để sửa từng thành phần.
Trong trường hợp chưa có kiểu viền khác, chỉ đặt màu hoặc độ rộng không làm viền xuất hiện vì kiểu ban đầu là none. Cách viết đầy đủ như mẫu giúp thấy rõ ba thông số.
Nhìn các kiểu viền cạnh nhau
solid là đường liền; dotted là chấm; dashed là nét đứt; double là hai đường. inset/outset tạo cảm giác lõm/nổi, còn ridge/groove tạo cảm giác gờ/rãnh. none không vẽ viền.
Ảnh mẫu dùng cùng màu teal và độ rộng khai báo 6px cho các kiểu. Hình dạng chi tiết có thể khác giữa trình duyệt; cần phân biệt tên kiểu và tác dụng chính.
Đặt riêng trên, phải, dưới, trái
```css
.ghi_chu {
border-top: 2px solid red;
border-right: 4px dashed blue;
border-bottom: 3px double green;
border-left: 6px solid navy;
padding: 4px 8px 12px 16px;
margin: 10px 20px;
}
```
border-left đặt riêng phía trái nên không đổi ba phía còn lại. Trong mẫu, trái là đường liền navy rộng 6px, phải là nét đứt xanh dương rộng 4px. Cách đặt padding và margin theo phía cũng giúp điều chỉnh khoảng đệm và lề riêng khi cần.
Bài luyện
Trong border:3px dashed teal;, dashed là gì?
teal mới là màu.
3px mới là độ rộng.
Đúng. dashed là nét đứt.
margin mới đặt lề ngoài.
Lời giải
Cách viết gộp gồm độ rộng 3px, kiểu dashed và màu teal. Nhận đúng thành phần giúp đổi kiểu mà vẫn giữ màu hoặc độ rộng khi cần.
Bài luyện
Trong mẫu bốn phía, muốn sửa riêng viền trái thành đường liền đỏ 4px, dùng khai báo nào?
Đúng. border-left đặt riêng viền trái.
border-top đặt viền trên.
margin-left đặt lề ngoài bên trái.
color đặt màu chữ.
Lời giải
Viền trái dùng border-left. Khai báo border-left:4px solid red; ghép độ rộng 4px, kiểu solid và màu red cho đúng phía, không thay viền trên/phải/dưới.
Bài luyện
Chưa có quy tắc viền nào khác. Chỉ đặt border-color:red cho p thì vì sao chưa thấy viền?
red không phải màu trong suốt.
p có thể có viền.
Không cần đổi tên phần tử.
Đúng. Cần có kiểu viền được vẽ.
Lời giải
border-color chỉ đặt màu; kiểu viền ban đầu vẫn là none nên không có đường viền để nhìn thấy. Trong ví dụ, có thể đặt border:2px solid red; để yêu cầu cả độ rộng, kiểu và màu.
Đang học