Thuộc tính border-right-width trong CSS
Bùi Tấn Lực - 837
- 06/10/2025
Chức năng của Thuộc tính border-right-width trong CSS
Thuộc tính border-right-width trong CSS dùng để quy định chiều rộng đường viền phải của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-right-style để quy định kiểu đường viền và thuộc tính border-right-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-right-width trong CSS
border-right-width: chieurong;
chieurong: Chiều rộng của đường viền phải, ví dụ 1px, 5px,...
Code Thuộc tính border-right-width trong CSS
border-right-width: 5px;
border-right-width: thick;
border-right-width: thin;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-right-width trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%;float:left;height:auto;background:antiquewhite;margin-bottom:10px;padding:10px;border-right-style: solid;border-right-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-right-width trong CSS</h1>
<span>Dùng để quy định chiều rộng đường viền phải của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-right-style để quy định kiểu đường viền và thuộc tính border-right-color để quy định màu sắc cho đường viền:</span>
<div style="border-right-width: 5px;">border-right-width: 5px;</div>
<div style="border-right-width: 1px;">border-right-width: 1px;</div>
<div style="border-right-width: thin;">border-right-width: thin;</div>
<div style="border-right-width: thick;">border-right-width: thick;</div>
</body>
</html>
Cách sử dụng border-right-width hiệu quả trong CSS
Thuộc tính border-right-width phát huy hiệu quả nhất khi được sử dụng đúng với mục đích thiết kế. Tùy từng trường hợp, bạn có thể chọn độ rộng cố định, giá trị định sẵn hoặc kết hợp với các thuộc tính viền khác để tạo điểm nhấn cho phần tử.
Thiết lập độ rộng viền phải bằng đơn vị px
Sử dụng đơn vị px giúp kiểm soát chính xác độ dày của cạnh phải. Cách này phù hợp khi giao diện cần một đường viền có kích thước ổn định, chẳng hạn như đường phân cách giữa hai khu vực nội dung.
.box {
border-right-width: 4px;
border-right-style: solid;
}
Giá trị càng lớn thì đường viền bên phải càng dày. Tuy nhiên, không nên đặt độ rộng quá lớn nếu viền chỉ có vai trò trang trí, vì có thể làm mất cân đối bố cục.
Sử dụng thin, medium và thick cho border-right-width
Ngoài đơn vị đo cụ thể, border-right-width còn hỗ trợ các giá trị định sẵn như thin, medium và thick. Đây là lựa chọn thuận tiện khi không cần kiểm soát chính xác số pixel.
.box {
border-right-width: thick;
border-right-style: solid;
}
Các giá trị này giúp mã CSS ngắn gọn và dễ đọc, nhưng kích thước thực tế phụ thuộc vào trình duyệt. Nếu thiết kế yêu cầu độ dày chính xác, nên sử dụng đơn vị như px thay vì các giá trị định sẵn.
Kết hợp border-right-width với border-right-style và border-right-color
Chỉ thiết lập border-right-width chưa đủ để tạo đường viền hiển thị rõ ràng. Trong thực tế, thuộc tính này thường được kết hợp với kiểu viền và màu viền để hoàn thiện cạnh phải của phần tử.
.box {
border-right-width: 3px;
border-right-style: solid;
border-right-color: #333;
}
Cách kết hợp này cho phép kiểm soát riêng độ dày, kiểu và màu của cạnh phải. Nhờ đó, bạn có thể tạo đường phân cách, nhấn mạnh một khu vực hoặc định hình giao diện mà không ảnh hưởng đến ba cạnh còn lại.
Lưu ý khi sử dụng border-right-width trong thiết kế giao diện
Nên chọn độ rộng viền dựa trên vai trò của phần tử và tổng thể giao diện. Với đường phân cách nhỏ, độ dày vừa phải thường giúp nội dung dễ nhìn hơn; còn viền dày chỉ nên dùng khi cần tạo điểm nhấn rõ rệt.
Đồng thời, cần nhớ rằng border-right-width chỉ kiểm soát độ rộng của viền bên phải. Nếu muốn thay đổi cả bốn cạnh, nên cân nhắc các thuộc tính viền phù hợp thay vì thiết lập riêng từng cạnh không cần thiết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-right-width trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
