CSS Border – Serie CSS – 6

CSS Border – Serie CSS – 6

Ở đây có thẻ được bọc viền các cạnh.
Ở đây có thẻ được bọc viền cạnh dưới.
Ở đây có thẻ được bọc viền cạnh bên.

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ả:

Viền Chấm bi
Viền dấu gạch ngang
Viền đường thẳng
Viền 2 đường thẳng
Viền là rãnh giữa 2 đường thẳng
Viền tại vùng biên
Đường viền 3D
Ngược lại với inset
Không viền
Viền Ẩn
Viền Remix

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à :

Viền Remix

Đơ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à :

Viền Remix

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ề:

Viền Remix

Đã 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ề:

Viền Remix

Đã 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ínhMô 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-leftTương tự border-bottom nhưng là bên trái
border-left-colorTương tự border-bottom-color nhưng là bên trái
border-left-styleTương tự border-bottom-style nhưng là bên trái
border-left-widthTương tự border-bottom-width nhưng là bên trái
border-radiusBo viền
border-rightTương tự border-bottom nhưng bên phải
border-right-colorTương tự border-bottom-color nhưng bên phải
border-right-styleTương tự border-bottom-style nhưng bên phải
border-right-widthTương tự border-bottom-width nhưng bên phải
border-styleĐặt kiểu viền cho tất cả
border-topTương tự border-bottom nhưng bên trên
border-top-colorTương tự border-bottom-color nhưng bên trên
border-top-styleTương tự border-bottom-style nhưng bên trên
border-top-widthTương tự border-bottom-width nhưng bên trên
border-widthĐặt đồ dày cho viền xung quanh