CSS - Đường viền
Thuộc tính đường viền cho phép bạn chỉ định đường viền của hộp đại diện cho một phần tử sẽ trông như thế nào. Có ba thuộc tính của đường viền mà bạn có thể thay đổi -
Các border-color chỉ định màu của đường viền.
Các border-style chỉ định xem đường viền phải là nét liền, đường đứt nét, đường kép hay một trong các giá trị có thể có khác.
Các border-width chỉ định chiều rộng của đường viền.
Bây giờ, chúng ta sẽ xem cách sử dụng các thuộc tính này với các ví dụ.
Thuộc tính màu viền
Thuộc tính màu viền cho phép bạn thay đổi màu của đường viền bao quanh một phần tử. Bạn có thể thay đổi từng màu của các cạnh dưới, trái, trên và phải của đường viền phần tử bằng cách sử dụng các thuộc tính:
border-bottom-color thay đổi màu của đường viền dưới cùng.
border-top-color thay đổi màu của đường viền trên cùng.
border-left-color thay đổi màu của đường viền bên trái.
border-right-color thay đổi màu của đường viền bên phải.
Ví dụ sau đây cho thấy tác dụng của tất cả các thuộc tính này:
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính kiểu đường viền
Thuộc tính kiểu đường viền cho phép bạn chọn một trong các kiểu đường viền sau:
none- Không có đường viền. (Tương đương với chiều rộng đường viền: 0;)
solid - Đường viền là một đường liền nét.
dotted - Đường viền là một dãy các dấu chấm.
dashed - Đường viền là một loạt các đường ngắn.
double - Đường viền là hai đường liền nét.
groove - Đường viền trông như được khắc vào trang giấy.
ridge - Viền trông ngược lại với rãnh.
inset - Đường viền làm cho hộp giống như được nhúng vào trang.
outset - Viền làm cho chiếc hộp giống như bước ra khỏi khung vẽ.
hidden - Giống như không có, ngoại trừ về giải quyết xung đột biên giới cho các phần tử bảng.
Bạn có thể thay đổi riêng kiểu của các đường viền dưới cùng, trái, trên và phải của một phần tử bằng cách sử dụng các thuộc tính sau:
border-bottom-style thay đổi kiểu của đường viền dưới.
border-top-style thay đổi kiểu của đường viền trên cùng.
border-left-style thay đổi kiểu của đường viền bên trái.
border-right-style thay đổi kiểu của đường viền bên phải.
Ví dụ sau đây cho thấy tất cả các kiểu đường viền này:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính chiều rộng đường viền
Thuộc tính chiều rộng đường viền cho phép bạn đặt chiều rộng của đường viền phần tử. Giá trị của thuộc tính này có thể là độ dài tính bằng px, pt hoặc cm hoặc nó phải được đặt thành mỏng, trung bình hoặc dày.
Bạn có thể thay đổi từng chiều rộng của các đường viền dưới cùng, trên, trái và phải của một phần tử bằng cách sử dụng các thuộc tính sau:
border-bottom-width thay đổi chiều rộng của đường viền dưới cùng.
border-top-width thay đổi chiều rộng của đường viền trên cùng.
border-left-width thay đổi chiều rộng của đường viền bên trái.
border-right-width thay đổi chiều rộng của đường viền bên phải.
Ví dụ sau đây cho thấy tất cả các chiều rộng đường viền này:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính đường viền sử dụng tốc ký
Thuộc tính border cho phép bạn chỉ định màu, kiểu và độ rộng của các đường trong một thuộc tính -
Ví dụ sau đây cho thấy cách sử dụng tất cả ba thuộc tính vào một thuộc tính duy nhất. Đây là thuộc tính được sử dụng thường xuyên nhất để đặt đường viền xung quanh bất kỳ phần tử nào.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>Nó sẽ tạo ra kết quả sau: