Thuộc tính border-right-style trong CSS
Bùi Tấn Lực - 862
- 06/10/2025
Chức năng của Thuộc tính border-right-style trong CSS
Thuộc tính border-right-style trong CSS dùng để quy định kiểu đường viền phải cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-right-width để quy định chiều rộng 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-style trong CSS
border-right-style: kieuduongvien;
kieuduongvien: Kiểu đường viền phải ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
Code Thuộc tính border-right-style trong CSS
border-right-style: solid;
border-right-style: dotted;
border-right-style: double;
border-right-style: dashed;
border-right-style: inset;
border-right-style: outset;
border-right-style: ridge;
border-right-style: groove;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-right-style 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-width: 5px;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-style trong CSS</h1>
<span>Dùng để quy định kiểu đường viền phải cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-right-width để quy định chiều rộng và thuộc tính border-right-color để quy định màu sắc cho đường viền:</span>
<div style="border-right-style: solid;">border-right-style: solid;</div>
<div style="border-right-style: dotted;">border-right-style: dotted;</div>
<div style="border-right-style: double;">border-right-style: double;</div>
<div style="border-right-style: dashed;">border-right-style: dashed;</div>
<div style="border-right-style: inset;">border-right-style: inset;</div>
<div style="border-right-style: outset;">border-right-style: outset;</div>
<div style="border-right-style: ridge;">border-right-style: ridge;</div>
<div style="border-right-style: groove;">border-right-style: groove;</div>
<div style="border-right-style: none;">border-right-style: none;</div>
<div style="border-right-style: hidden;">border-right-style: hidden;</div>
</body>
</html>
Ứng dụng của border-right-style trong thiết kế website
border-right-style phát huy hiệu quả khi bạn muốn tạo đường viền riêng cho cạnh phải của một phần tử mà không ảnh hưởng đến ba cạnh còn lại. Tùy mục đích thiết kế, thuộc tính này có thể được dùng để phân tách nội dung, tạo điểm nhấn hoặc phối hợp với các thuộc tính viền khác.
Tạo đường phân cách giữa các khu vực nội dung
Đường viền phải có thể đóng vai trò như một vạch ngăn giữa hai khu vực nằm cạnh nhau, chẳng hạn cột nội dung và thanh bên. Cách này giúp bố cục dễ quan sát mà không cần thêm phần tử HTML chỉ để tạo đường phân cách.
.sidebar {
border-right-style: solid;
}
Khi cần đường phân cách rõ hơn, có thể kết hợp kiểu viền với độ dày và màu sắc phù hợp. Việc thiết lập riêng cạnh phải cũng giúp kiểm soát chính xác vị trí cần hiển thị đường viền.
Làm nổi bật một phần tử bằng đường viền phải
Thay vì tạo khung bao quanh toàn bộ phần tử, bạn có thể chỉ sử dụng đường viền bên phải để tạo điểm nhấn cho tiêu đề, khối thông tin hoặc một thành phần trong giao diện. Cách này thường tạo cảm giác nhẹ và thoáng hơn so với viền bốn phía.
.notice {
border-right-style: solid;
}
Để hiệu ứng phù hợp với giao diện, nên phối hợp border-right-style với màu và độ rộng của đường viền. Kiểu solid phù hợp với đường nhấn rõ ràng, trong khi dashed hoặc dotted có thể tạo cảm giác mềm và khác biệt hơn.
Kết hợp border-right-style với border-right-width và border-right-color
border-right-style chỉ xác định cách hiển thị đường viền. Để tạo một đường viền hoàn chỉnh, bạn thường cần kết hợp thêm border-right-width để đặt độ dày và border-right-color để xác định màu.
.box {
border-right-style: solid;
border-right-width: 2px;
border-right-color: #333;
}
Cách tách riêng từng thuộc tính giúp dễ điều chỉnh giao diện khi cần. Bạn có thể thay đổi kiểu nét, độ dày hoặc màu của cạnh phải mà không phải tác động đến các cạnh khác của phần 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-style 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 *
