CSS Border – Serie CSS – 6

Các thẻ p ở trên là ví dụ cho phần này.

Border

Border dịch là đường viền. Tên như ý nghĩa, thuộc tính này sẽ giúp chúng ta bao bọc các thẻ bằng các đường viền tùy chỉnh tùy theo nhu cầu mỗi người.

Vào phần chính:

CSS Border Style:

bao gồm các thuộc tính sau đây:

dotted – Viền Chấm bi
dashed – Viền dấu gạch ngang
solid – Viền đường thẳng
double – Viền 2 đường thẳng
groove – Viền là rãnh giữa 2 đường thẳng. Hiệu ứng này phụ thuộc vào giá trị của border-color
ridge – Viền tại vùng biên. Hiệu ứng này phụ thuộc vào giá trị của border-color
inset – Đường viền 3D . Hiệu ứng này phụ thuộc vào giá trị của border-color
outset – Ngược lại với inset. Hiệu ứng này phụ thuộc vào giá trị của border-color
none – Không viền
hidden – Ẩn viền

Kết quả:

Cách dùng:

selector {
 border-style : thuộc tính liệt kê ở trên 
}

CSS Border width:

Là độ dày của viền :
Cách dùng:

selector {
 border-width : thuộc tính liệt kê ở trên; 
}

ví dụ:

<div class="container" style="border-style:solid;border-width:4px;">
 Viền Remix
</div>

Kết quả trả về là :

Đơn giản phải không.

CSS Border Color :

Nghĩa là màu viền. Giá trị màu giống với cách dùng background. Bao gồm mã HEX,RGB , Transparent, và tên màu định nghĩa cơ bản ( ví dụ: red, green, blue, yellow )

Cách dùng:

selector {
 border-color: Mã màu ;
}

Ví dụ:

<div class="container" style="border-style:solid;border-width:4px; border-color:red ">
Viền Remix
</div>

kết quả trả về là :

CSS Border Side

Nghĩa là viền theo các cạnh tùy chọn.
Cấu trúc :

selector {
 border-right-style: thuộc tính;
 border-left-style: thuộc tính;
 border-top-style: thuộc tính;
 border-bottom-style: thuộc tính;
}

Thuộc tính ở đây dùng tương tự như border-style.

Vì có rất nhiều thuộc tính border nên sẽ làm nhiều người mới học css dễ lan man, lung tung beng, nên CSS cũng có cách viết khác ngắn gọn hơn rất nhiều.
Cách dùng:
border: width style color;

ví dụ cụ thể:

<div class="container" style="border: 2px solid red"> Viền Remix </div>

kết quả trả về:

Đã hiểu rồi đúng không.

CSS Border Radius:

Cách dùng:
border-radius: giá trị;

ví dụ cụ thể:

<div class="container" style="border: 2px solid red; border-radius:5px"> Viền Remix </div>

kết quả trả về:

Đã hiểu rồi đúng không.

Giờ qua bước nâng cao:

Border ngoài các thuộc tính trên còn chia ra rất nhiều thuộc tính nhỏ, bao gồm :

Thuộc tính	Mô tả
border	Đặt tất cả các thuộc tính viền trong một khai báo
border-bottom	Đặt tất cả các thuộc tính viền ở dưới trong một khai báo
border-bottom-color	Đặt màu cho viền dưới
border-bottom-style	Đặt kiểu cho viền dưới
border-bottom-width	Đặt độ dày cho viền dưới
border-color	Đặt màu cho tất cả các viền
border-left	Tương tự border-bottom nhưng là bên trái
border-left-color	Tương tự border-bottom-color nhưng là bên trái
border-left-style	Tương tự border-bottom-style nhưng là bên trái
border-left-width	Tương tự border-bottom-width nhưng là bên trái
border-radius	Bo viền
border-right	Tương tự border-bottom nhưng bên phải
border-right-color	Tương tự border-bottom-color nhưng bên phải
border-right-style	Tương tự border-bottom-style nhưng bên phải
border-right-width	Tương tự border-bottom-width nhưng bên phải
border-style	Đặt kiểu viền cho tất cả
border-top	Tương tự border-bottom nhưng bên trên
border-top-color	Tương tự border-bottom-color nhưng bên trên
border-top-style	Tương tự border-bottom-style nhưng bên trên
border-top-width	Tương tự border-bottom-width nhưng bên trên
border-width	Đặt đồ dày cho viền xung quanh