Thuộc tính border trong CSS

Trong phần này, chúng ta sẽ tìm hiểu cách tạo và sử dụng thuộc tính border trong CSS

Thuộc tính border cho phép bạn chỉ định kiểu, màu sắc, độ dày của đường viền của một phần tử.

Thuộc tính border-style

Thuộc tính này cho phép thiết lập kiểu đường viền cho phần tử/đối tượng được chỉ định

Thuộc tính này nhận một trong các giá trị như sau:

dotted - Xác định một đường viền chấm
dashed - Xác định đường viền đứt nét
solid - Xác định một đường viền chắc chắn
double - Xác định đường viền kép
groove- Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
ridge- Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
inset- Xác định đường viền in 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
outset- Xác định đường viền ban đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
none - Xác định không có đường viền
hidden - Xác định một đường viền ẩn

Cú pháp

element{
    border-style: value;
}

Ngoài ra, khi bạn chỉ muốn thiết lập đường viền cho 1 cạnh nào đó bạn chỉ cần thay đổi tên thuộc tính border-style thành border-cạnh(top/right/left/bottom)-style

VD:Bạn muốn thiết lập đường viền dạng solid cạnh bên trái thì chỉ cần: border-left-style: solid;

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
    <p class="dotted">A dotted border.</p>
    <p class="dashed">A dashed border.</p>
    <p class="solid">A solid border.</p>
    <p class="double">A double border.</p>
    <p class="groove">A groove border.</p>
    <p class="ridge">A ridge border.</p>
    <p class="inset">An inset border.</p>
    <p class="outset">An outset border.</p>
    <p class="none">No border.</p>
    <p class="hidden">A hidden border.</p>
    <p class="mix">A mixed border.</p>
</body>
</html>

Thuộc tính border-width

Thuộc tính này cho phép thiết lập độ dày của đường viền. Các đơn vị có thể sử dụng như px, em, rem, pt,...

Cú pháp

element{
    border-width: value;
}

Ví dụ

<!DOCTYPE html>
<html>
<head>
	<title>Trở thành cao thủ HTML và CSS</title>
	<style>
		 p{
			  border-style: solid;
				border-width: 2px;
		  }
	</style>
</head>
<body>
	<p>Phát triển ứng dụng web</p>
</body>
</html>

Ngoài ra, chúng ta có thể đặt độ dày khác nhau theo các cạnh của phần tử bằng cách:

border-width: top/bottom left/right; (2 giá trị)
border-wtidh: top right bottom left; (4 giá trị)

Thuộc tính border-color

Thuộc tính này giúp thiết lập màu của đường viền. Nếu không đặt màu cho đường viền, mặc định màu của đường viền sẽ thừa hưởng từ màu của phần tử

Cú pháp

element{
    border-color: value;
    //value có thể là tên màu, mã màu
}

Nếu bạn muốn thiết lập 4 cạnh 4 màu viền khác nhau thì đơn giản chỉ cần đặt giá trị của thuộc tính border-color là 4 màu khác nhau tương ứng với top - right - bottom - left

Thuộc tính border

Là kiểu viết tắt của 3 thuộc tính ở trên là border-style, border-color, border-width.

Cú pháp

element{
    border: width style color;
}

Ví dụ: Bạn muốn đặt 1 đường viền có độ dày 2px, màu vàng và kiểu solid

p{
    border: 2px solid yellow;
}

Thuộc tính border-radius

Thuộc tính này cho phép thiết lập độ bo tròn của đường viền. Đơn vị hay sử dụng của giá trị là px.

Cú pháp

element{
    border-radius: value;
    // Thực hiện bo tròn áp dụng lên cả 4 góc của phần tử
}

Ngoài ra, nếu bạn muốn chỉ định bo tròn một số góc nhất định ở mức độ khác nhau của phần tử có thể thiết lập thuộc tính border-radius với giá trị như sau:

border-radius: [top-left bottom-right] [top-right bottom-left]; (2 giá trị)
border-radius: [top-left] [top-right bottom-left] [bottom-right]; (3 giá trị)
border-radius: [top-left] [top-right] [bottom-left] [bottom-right]; (4 giá trị)

PreviousThuộc tính định dạng font NextĐịnh dạng liên kết

<!DOCTYPE html> <html> <head> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. An outset border. No border. A hidden border. A mixed border. </body> </html>

<!DOCTYPE html> <html> <head> <title>Trở thành cao thủ HTML và CSS</title> <style> p{ border-style: solid; border-width: 2px; } </style> </head> <body> Phát triển ứng dụng web </body> </html>