Cơ bản làm việc với đường viền trong CSS

Bây giờ chúng ta sẽ học cách thêm đường viền cho các phần tử. Điều này được thực hiện thông qua ba thuộc tính: thuộc tính border-width thiết lập độ dày đường viền, border-color - màu sắc, và border-style thiết lập kiểu đường viền.

Hai thuộc tính đầu tiên hoạt động một cách rõ ràng: border-color nhận màu sắc trong cùng định dạng với thuộc tính color, và độ dày đường viền được thiết lập bằng pixel. Còn thuộc tính border-style nhận giá trị dưới dạng các từ khóa. Ví dụ, giá trị solid thiết lập một đường liền nét.

Hãy tạo, ví dụ, một đường viền dày 3 pixel, dưới dạng đường liền nét, màu đỏ:

<div id="elem"></div>

#elem {
	border-width: 3px;    /* độ dày 3px */
	border-style: solid;  /* dạng đường liền nét */
	border-color: red;    /* màu đỏ */
	width: 300px;
	height: 100px;
}

Trong các bài học tiếp theo, chúng ta sẽ xem xét làm việc với đường viền chi tiết hơn.