8.1 Thuộc tính border
Khung viền là một phần quan trọng trong web design. Chúng giúp làm nổi bật các phần tử và cải thiện cảm nhận hình ảnh của trang. CSS cung cấp nhiều thuộc tính để tạo và chỉnh sửa khung viền. Hãy xem qua các thuộc tính chính của khung viền, bao gồm cách viết gọn và đầy đủ, cũng như các thuộc tính để đặt độ rộng, kiểu dáng, màu sắc và góc bo tròn của khung viền.
Các thông số chính
Các thông số chính của khung viền có thể được đặt bằng cách sử dụng các thuộc tính riêng lẻ: border-width, border-style và border-color.
Cú pháp:
element {
border-width: width;
border-style: style;
border-color: color;
}
Ví dụ sử dụng:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Cách viết gọn
Thuộc tính border cho phép đặt tất cả các thông số chính của khung viền (độ rộng, kiểu dáng và màu sắc) trong một dòng.
Cú pháp:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Cách viết gọn</div>
<div class="border-full">Cách viết đầy đủ</div>
</body>
8.2 Độ rộng khung viền: border-width
Thuộc tính border-width đặt độ rộng khung viền. Giá trị có thể được đặt đơn vị là pixel (px), point (pt), phần trăm (%) hoặc bằng từ khóa (thin, medium, thick).
Cú pháp:
element {
border-width: width;
}
Ví dụ:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Khung mỏng</div>
<div class="border-medium">Khung trung bình</div>
<div class="border-thick">Khung dày</div>
<div class="border-custom">Khung rộng 5px</div>
</body>
8.3 Kiểu khung viền: border-style
Mô tả:
Thuộc tính border-style đặt kiểu khung viền. Các kiểu bao gồm:
none: không có khung viềnsolid: đường liềndotted: đường chấmdashed: đường gạch ngangdouble: đường képgroove: khung có rãnhridge: khung có gâninset: khung chìmoutset: khung nổi
Cú pháp:
element {
border-style: style;
}
Ví dụ:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Không có khung viền</div>
<div class="border-solid">Đường liền</div>
<div class="border-dotted">Đường chấm</div>
<div class="border-dashed">Đường gạch ngang</div>
<div class="border-double">Đường kép</div>
<div class="border-groove">Rãnh</div>
<div class="border-ridge">Gân</div>
<div class="border-inset">Khung chìm</div>
<div class="border-outset">Khung nổi</div>
</body>
8.4 Màu sắc khung viền: border-color
Thuộc tính border-color đặt màu sắc khung viền. Màu sắc có thể được chỉ định bằng các định dạng khác nhau: tên màu, mã hex, RGB, RGBA, HSL, HSLA.
Cú pháp:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Khung đỏ</div>
<div class="border-blue">Khung xanh</div>
<div class="border-green">Khung xanh lá</div>
<div class="border-rgba">Khung đỏ trong suốt một phần</div>
</body>
8.5 Góc bo tròn với border-radius
Thuộc tính border-radius cho phép bo tròn các góc của phần tử, tạo ra khung viền bo tròn. Nó có thể áp dụng cho cả bốn góc cùng lúc hoặc từng góc riêng biệt.
Cú pháp:
element {
border-radius: radius;
}
Giá trị:
- Giá trị đơn: ví dụ,
border-radius: 10px;— đặt bán kính bo tròn giống nhau cho tất cả các góc - Hai giá trị: ví dụ,
border-radius: 10px 20px;— giá trị đầu tiên cho các góc trên trái và dưới phải, giá trị thứ hai cho các góc trên phải và dưới trái - Bốn giá trị: ví dụ,
border-radius: 10px 20px 30px 40px;— đặt bán kính cho các góc trên trái, trên phải, dưới phải và dưới trái tương ứng - Giá trị hỗn hợp: bán kính có thể được đặt bằng phần trăm, cho phép điều chỉnh bo tròn theo kích thước của phần tử
Ví dụ:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Bo tròn tất cả các góc</div>
<div class="radius-top">Bo tròn góc trên</div>
<div class="radius-bottom">Bo tròn góc dưới</div>
<div class="radius-mixed">Bo tròn góc hỗn hợp</div>
</body>
.radius-all: áp dụng bán kính bo tròn giống nhau (15px) cho tất cả các góc.radius-top: áp dụng bo tròn (20px) chỉ cho góc trên.radius-bottom: áp dụng bo tròn (25px) chỉ cho góc dưới.radius-mixed: áp dụng các giá trị bo tròn khác nhau cho từng góc
GO TO FULL VERSION