Thuộc tính border-right trong CSS
Bùi Tấn Lực - 882
- 05/10/2025
Chức năng của Thuộc tính border-right trong CSS
Thuộc tính border-right trong CSS dùng để kẻ đường viền phải cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc.
Cú pháp của Thuộc tính border-right trong CSS
border-right: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền phải, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền phải ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền phải, ví dụ: #ff0000, red,...
Code Thuộc tính border-right trong CSS
border-right: 1px solid #ff0000;
border-right: 5px dotted green;
border-right: 5px solid green;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-right 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}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-right trong CSS</h1>
<span>Dùng để kẻ đường viền phải cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc:</span>
<div style="border-right: 1px solid #ff0000;">border-right: 1px solid #ff0000;</div>
<div style="border-right: 5px solid green;">border-right: 5px solid green;</div>
<div style="border-right: 5px dotted green;">border-right: 5px dotted green;</div>
<div style="border-right: 1px dotted red;">border-right: 1px dotted red;</div>
<div style="border-right: 5px double green;">border-right: 5px double green;</div>
<div style="border-right: 10px double red;">border-right: 10px double red;</div>
<div style="border-right: 5px dashed green;">border-right: 5px dashed green;</div>
<div style="border-right: 10px dashed red;">border-right: 10px dashed red;</div>
<div style="border-right: 1px inset red;">border-right: 1px inset red;</div>
<div style="border-right: 5px inset green;">border-right: 5px inset green;</div>
<div style="border-right: 10px inset red;">border-right: 10px inset red;</div>
<div style="border-right: 1px outset red;">border-right: 1px outset red;</div>
<div style="border-right: 5px outset green;">border-right: 5px outset green;</div>
<div style="border-right: 10px outset red;">border-right: 10px outset red;</div>
<div style="border-right: 1px ridge red;">border-right: 1px ridge red;</div>
<div style="border-right: 5px ridge green;">border-right: 5px ridge green;</div>
<div style="border-right: 1px groove red;">border-right: 1px groove red;</div>
<div style="border-right: 5px groove green;">border-right: 5px groove green;</div>
</body>
</html>
border-right được ứng dụng vào những trường hợp nào?
Trong thực tế, border-right không chỉ dùng để tạo một đường viền đơn thuần. Thuộc tính này còn có thể được tận dụng để phân chia nội dung, tạo điểm nhấn cho thành phần và định hình bố cục giao diện mà không cần thêm phần tử HTML phụ.
Tạo đường phân cách giữa các nội dung
Một cách dùng phổ biến của border-right là tạo đường ngăn cách giữa hai khu vực nằm cạnh nhau. Cách này phù hợp với menu, danh sách liên kết, thông tin sản phẩm hoặc các cột nội dung cần phân biệt rõ ràng.
Chỉ cần đặt đường viền bên phải cho phần tử đứng trước, khoảng cách giữa các khu vực sẽ trở nên trực quan hơn mà vẫn giữ được cấu trúc HTML gọn gàng.
Tạo thanh nhấn bên phải cho phần tử
border-right cũng có thể tạo thành một thanh nhấn chạy dọc cạnh phải của phần tử. Đây là cách đơn giản để làm nổi bật tiêu đề, hộp thông tin hoặc một khu vực quan trọng trong giao diện.
Khi kết hợp độ dày, kiểu đường viền và màu sắc phù hợp, thanh nhấn có thể giúp người dùng nhanh chóng nhận biết phần nội dung cần chú ý mà không làm bố cục trở nên nặng nề.
Thiết kế giao diện với đường viền phải
Trong thiết kế giao diện, border-right có thể được sử dụng để tạo ranh giới giữa các thành phần nằm theo chiều ngang. Chẳng hạn, một thanh điều hướng có thể dùng đường viền phải để tách nhóm liên kết, hoặc một khu vực thông tin có thể tạo điểm kết thúc rõ ràng trước phần nội dung kế bên.
Để giao diện cân đối, nên kết hợp border-right với khoảng cách bên trong và bên ngoài phần tử thay vì chỉ tăng độ dày đường viền. Cách này giúp đường phân cách có đủ khoảng trống và không khiến nội dung bị dồn sát vào viền.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-right 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 *
