Thuộc tính đường viền CSS được sử dụng để đặt đường viền của một HTML phần tử . Thuộc tính viết tắt của nó là border-width , border-color và border-style .
Thêm đường viền xung quanh các phần tử trên trang web là một tính năng quan trọng của thiết kế web. Các đường viền có thể được sử dụng để phân tách nội dung của trang web, giúp mọi người diễn giải thông tin được trình bày trên trang dễ dàng hơn.
Thuộc tính đường viền CSS được sử dụng để đặt đường viền của một phần tử HTML. Thuộc tính border là viết tắt của ba thuộc tính phụ xác định kiểu, màu sắc và chiều rộng của đường viền.
Trong hướng dẫn này, chúng ta sẽ thảo luận về cách sử dụng thuộc tính CSS border và cách sử dụng các thuộc tính phụ của nó, để thiết kế đường viền cho một phần tử HTML. Đến cuối hướng dẫn này, bạn sẽ được trang bị tất cả kiến thức cần thiết để thiết kế đường viền trong CSS.
Giới thiệu về các đường viền trong CSS
Như chúng tôi đã nêu trước đây, thuộc tính CSS border được sử dụng để chỉ định một đường viền xung quanh một phần tử web. Ví dụ:một đường viền có thể được áp dụng xung quanh một hình ảnh, một hộp hoặc một biểu mẫu web.
Thuộc tính border là viết tắt của ba thuộc tính phụ được sử dụng để áp dụng các kiểu cụ thể cho đường viền của phần tử. Các thuộc tính viết tắt là:
-
border-width(chỉ định độ dày của đường viền) -
border-color(chỉ định màu của đường viền) -
border-style(chỉ định kiểu của đường viền)
Khi xác định đường viền, bạn có thể sử dụng border thuộc tính để chỉ định đường viền hoặc sử dụng từng thuộc tính con của nó. Chúng ta sẽ thảo luận cả hai cách tiếp cận trong suốt bài viết này.
Thuộc tính phụ của Đường viền CSS
Như chúng ta đã thảo luận trước đó, có ba thuộc tính con được sử dụng để xác định đường viền trong CSS. Hãy chia nhỏ từng thuộc tính phụ này và khám phá ví dụ về cách chúng hoạt động.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
border-style Thuộc tính trong CSS
Thuộc tính kiểu đường viền được sử dụng để xác định kiểu đường viền nào sẽ hiển thị trên trang web. Nói cách khác, border-style xác định các đường viền trông như thế nào trên trang web:nét liền, dấu chấm, nét đứt, v.v.
Có thể có 10 giá trị có thể được gán cho border-style bất động sản. Dưới đây là cách mỗi kiểu này xuất hiện khi được áp dụng cho một hộp, kèm theo mô tả về mỗi kiểu:
Mã CSS chúng tôi sử dụng để tạo các phần tử web này như sau:
.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; } Như bạn có thể thấy, trong mã của chúng tôi, chúng tôi đã sử dụng từng giá trị tiềm năng để tạo kiểu cho đường viền của chúng tôi.
border-width Thuộc tính trong CSS
border-width thuộc tính đặt chiều rộng của đường viền CSS. Chiều rộng của đường viền có thể được đặt bằng giá trị chiều dài CSS (pt , px , em , v.v.) hoặc bằng cách sử dụng một trong ba border-width tùy chỉnh giá trị:thin , medium và thick .
Giả sử chúng ta muốn tạo một 5px đường viền chắc chắn xung quanh hộp. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<style>
.box {
border-style: solid;
border-width: 5px;
}
</style>
<html>
<p class="box">5px thick solid border</p>
</html>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra mã của chúng tôi.
Chúng tôi đã tạo một đường viền sử dụng kiểu solid và có độ dày là 5px.
border-color Thuộc tính trong CSS
Như bạn mong đợi, một thuộc tính cho màu sắc sẽ chỉ định màu. border-color thuộc tính được sử dụng để đặt màu cho đường viền trong CSS. Các giá trị màu được chấp nhận bởi border-color tài sản là:
- tên (tên của một màu, chẳng hạn như
blue) - HEX (giá trị màu thập lục phân, chẳng hạn như
#000) - HSL (giá trị màu HSL, chẳng hạn như
hsl(10, 100%, 25%)) - RGB (một giá trị màu RGB, chẳng hạn như
rgb(102, 222, 95)) -
transparent
Giả sử bạn muốn tạo một hộp có đường viền chấm màu xanh lam rộng 5px. Bạn có thể làm như vậy bằng cách sử dụng mã này:
<style>
.box {
border-style: dotted;
border-width: 5px;
border-color: blue;
}
</style>
<html>
<p class="box">5px thick blue dotted border</p>
</html>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra mã của chúng tôi.
Thuộc tính phụ Nhiều giá trị
Mỗi thuộc tính phụ cho CSS border tài sản có thể chấp nhận nhiều giá trị. Điều này cho phép bạn đặt đường viền tùy chỉnh cho mỗi cạnh của phần tử trong CSS.
Dưới đây là các quy tắc cần ghi nhớ nếu bạn muốn đặt đường viền tùy chỉnh cho mỗi cạnh của phần tử trong CSS:
- Nếu bạn chỉ định một giá trị, kiểu đường viền sẽ được áp dụng cho tất cả các cạnh.
- Nếu bạn chỉ định hai giá trị, thứ tự sau sẽ được sử dụng:
- trên và dưới, trái và phải
- Nếu bạn chỉ định ba giá trị, thứ tự sau sẽ được sử dụng:
- trên cùng, phải và trái, dưới cùng
- Nếu bạn chỉ định bốn giá trị, thứ tự sau sẽ được sử dụng:
- trên, phải, dưới, trái
Giả sử chúng ta muốn tạo một đường viền với phần trên và dưới đồng nhất và bên trái và bên phải có dấu chấm. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
<style>
.box { border-style: solid dashed; }
</style>
<html>
<p class="box">solid top and dashed sides border</p>
</html>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra mã của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã tạo một đường viền kết hợp bằng cách chỉ định hai kiểu đường viền. Phần tử này sử dụng kiểu đường viền đứt nét trên các cạnh trái và phải của nó và kiểu liền khối ở trên cùng và dưới cùng của phần tử.
Chúng tôi sẽ sử dụng phương pháp tương tự nếu chúng tôi muốn thay đổi màu hoặc chiều rộng của đường viền.
Viết tắt đường viền CSS
Có ba thuộc tính phụ CSS có thể được sử dụng để xác định đường viền.
Trong các ví dụ trên, chúng ta đã thảo luận về cách sử dụng từng thuộc tính phụ này riêng lẻ. Tuy nhiên, có thể chỉ định tất cả các thuộc tính con của đường viền trong một thuộc tính duy nhất. Điều này sẽ cho phép chúng tôi rút ngắn mã của mình.
Thuộc tính border sử dụng cấu trúc sau để xác định đường viền CSS:
-
border-width(tùy chọn) -
border-style(bắt buộc) -
border-color(tùy chọn)
Giả sử chúng ta muốn tạo một đường viền màu hồng đặc 5px xung quanh một dòng văn bản. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<style>
.box { border: 5px solid pink };
</style>
<html>
<p class="box">5px solid pink border</p>
</html>
Nhấn vào Nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, bạn có thể thấy rằng chúng tôi có thể xác định đường viền của mình trên một đường, thay vì sử dụng ba đường và từng thuộc tính phụ đường viền riêng lẻ.
Đường viền riêng lẻ CSS
Thuộc tính phụ và thuộc tính đường viền cũng có thể được áp dụng cho một mặt riêng lẻ của phần tử web. Nếu bạn muốn đặt giao diện của một đường viền cụ thể trên một phần tử web, bạn có thể sử dụng các thuộc tính sau:
-
border-left-[property] -
border-right-[property] -
border-top-[property] -
border-bottom-[property]
Giá trị của thuộc tính có thể là:
-
style(để đặt kiểu đường viền) -
color(để đặt màu của đường viền) -
width(để đặt độ dày của đường viền) - trống (sử dụng cách viết tắt đường viền để xác định đường viền)
Các thuộc tính và giá trị rất dễ sử dụng và dễ nhớ, nhưng sau đây là danh sách tất cả các kết hợp giá trị-thuộc tính phụ có thể có:
- kiểu viền bên trái
- màu viền bên trái
- chiều rộng bên trái của đường viền
- kiểu viền phải
- màu viền phải
- chiều rộng bên phải của đường viền
- kiểu trên cùng của đường viền
- màu trên cùng của đường viền
- chiều rộng trên cùng của đường viền
- kiểu đường viền dưới cùng
- màu dưới cùng của đường viền
- chiều rộng đường viền dưới cùng
Giả sử chúng ta muốn tạo một hộp văn bản với đường viền liền khối ở bên trái rộng 2px và đường viền chấm ở trên cùng rộng 5px. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
<style>
.box {
border-left: 2px solid;
border-top: 5px dotted;
}
</style>
<html>
<p class="box">mixed border</p>
</html> Ở bên trái của hộp của chúng tôi, chúng tôi có đường viền liền khối 2px, trong khi phía trên có đường viền chấm 5pc. Bằng cách sử dụng các thuộc tính đường viền riêng lẻ, chúng tôi có thể chỉ định cách đường viền xuất hiện trên mỗi cạnh của hộp.
Kết luận
border thuộc tính được sử dụng để tạo đường viền trong CSS và nó có ba thuộc tính phụ — kiểu dáng, màu sắc và chiều rộng — được sử dụng để tùy chỉnh từng phần của đường viền một cách riêng biệt.
Hướng dẫn này đã thảo luận, với một vài ví dụ, cách sử dụng thuộc tính border và tất cả ba thuộc tính phụ của nó, để tạo đường viền trong CSS. Chúng tôi cũng đã khám phá cách tạo kiểu cho từng mặt của một phần tử bằng cách sử dụng các thuộc tính đường viền riêng lẻ.
Nếu bạn muốn tìm hiểu thêm về đường viền CSS, hãy xem các hướng dẫn khác của chúng tôi giải thích cách triển khai hình ảnh đường viền, thu gọn đường viền, đường viền và độ lệch đường viền, bán kính đường viền cho các góc tròn và hiệu ứng bóng hộp đẹp mắt về mặt thẩm mỹ!