Cafedev chia sẻ cho ace về màu, bo tròn góc(Rounded), cách viết code ngắn gọn của viền(Border) trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.
Nội dung chính
1.Màu của Border
Thuộc tính border-color được sử dụng để đặt màu của bốn đường viền.
Màu có thể được đặt bằng:
- Tên – chỉ định tên màu, như “red”
- HEX – chỉ định một giá trị HEX, như “# ff0000”
- RGB – chỉ định một giá trị RGB, như “rgb (255,0,0)”
- HSL – chỉ định một giá trị HSL, như “hsl (0, 100%, 50%)”
- Màu trong suốt
Lưu ý: Nếu border-color không được đặt, nó sẽ kế thừa màu của phần tử.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>2. Chỉ đinh màu cho cạnh bên
Thuộc tính border-color có thể có từ một đến bốn giá trị (đối với đường viền trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên trái).
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>
<p class="one">A solid multicolor border</p>
</body>
</html>
Ví dụ đặt màu HEX
Màu của đường viền cũng có thể được chỉ định bằng cách sử dụng giá trị thập lục phân (HEX):
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}Ví dụ đặt màu RGB
Hoặc bằng cách sử dụng các giá trị RGB:
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}Ví dụ đặt màu HSL
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}3. Bo tròn góc của Borders
Thuộc tính border-radius được sử dụng để thêm đường viền tròn vào một phần tử:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>4. Viết gọn thuộc tính border(Shorthand)
Giống như bạn đã thấy ở trang trước, có nhiều thuộc tính cần xem xét khi xử lý đường viền.
Để rút ngắn code, cũng có thể chỉ định tất cả các thuộc tính đường viền riêng lẻ trong một thuộc tính.
Thuộc tính border là một thuộc tính viết tắt cho các thuộc tính đường viền riêng lẻ sau:
border-widthborder-style(required)border-color
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and border-color.</p>
</body>
</html>
- Bạn cũng có thể chỉ định tất cả các thuộc tính đường viền riêng lẻ chỉ cho một mặt:
Mặt trái
p {
border-left: 6px solid red;
background-color: lightgrey;
}Mặt dưới
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
 của viền(Border) trong CSSCafedev chia sẻ cho ace về màu, bo tròn góc(Rounded), cách viết code ngắn gọn của viền(Border) trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.){kind=link}