CSS Border

Border style

Border style dùng để thay đổi cách hiển thị của border thông qua thuộc tính border-style

Cú pháp

border-style: value;

Giá trị

Mix border-style

Một phẩn tử có 4 cạnh do đó chúng ta có thể khai báo từng cạnh một kiểu border theo cú pháp sau:

border-style: top right bottom left;

Để dễ hình dung hơn các bạn có thể xem hình dưới khi có kết hợp với color và width:

Border-width

Thuộc tính border-width dùng để quy định độ dày của 4 cạnh border.

Cú pháp

Gán giá trị border cho cả 4 góc

Đây là cú pháp cơ bản nhất khi bạn muốn gán một giá trị border-width áp dụng cho cả 4 cạnh, khi đó ta đưa vào cho border-width một giá trị duy nhất.

border-width: value;

Gán giá trị theo từng cạnh

Trong trường hợp chúng ta muốn gán giá trị khác nhau cho từng cạnh cụ thể thì ta sẽ đưa từng giá trị theo cú pháp sau

border-width: top right bottom left;

Gán giá trị theo trục

Trong trường hợp chúng ta muốn gán giá trị theo trục x hoặc y, chúng ta sẽ khai báo 2 giá trị

border-width: top-bottom right-left;

Gán giá trị trục x và tuỳ chỉnh trục 2 chiều của trục y

Việc gán giá trị cho trục x và 2 chiều của trục y hay gặp ở các trường hợp style cho các card có chiều top, bottom và left-right khác nhau

border-width: top right-left bottom;

Giá trị

Giá trị của border-width có thể là tất cả các giá trị có đơn vị hợp lệ hoặc giá trị cấu hình trước: thin, medium, và thick

Border-color

Thuộc tính border-color dùng để quy định màu sắc của 4 cạnh border.

Cú pháp

Gán giá trị color cho cả 4 góc

Đây là cú pháp cơ bản nhất khi bạn muốn gán một giá trị border-color áp dụng cho cả 4 cạnh, khi đó ta đưa vào cho border-color một giá trị duy nhất.

border-color: value;

Gán giá trị theo từng cạnh

Trong trường hợp chúng ta muốn gán giá trị khác nhau cho từng cạnh cụ thể thì ta sẽ đưa từng giá trị theo cú pháp sau

border-color: top right bottom left;

Gán giá trị theo trục

Trong trường hợp chúng ta muốn gán giá trị theo trục x hoặc y, chúng ta sẽ khai báo 2 giá trị

border-color: top-bottom right-left;

Gán giá trị trục x và tuỳ chỉnh trục 2 chiều của trục y

border-width: top right-left bottom;

Giá trị

Giá trị của border-color là các màu hợp lệ

Border sides

Như chúng ta đã biết 1 phần tử sẽ có 4 cạnh và các khai báo phía trên của border-style, border-width, border-color đều có cú pháp để khai báo từng giá trị của cạnh nhưng nếu chỉ khai báo 1 cạnh thì các cú pháp trên đều chưa đáp ứng được.

Do đó border sides ra đời cho phép chúng ta khai báo các thuộc tính của border cho một cạnh cụ thể, chi tiết như sau:

Cú pháp

border-top-style: $style-value; // border top style
border-right-style: $style-value; // border right style
border-bottom-style: $style-value; // border bottom style
border-left-style: $style-value; // border left style

border-top-width: $width-value; // border top width
border-right-width: $width-value; // border right width
border-bottom-width: $width-value; // border bottom width
border-left-width: $width-value; // border left width

border-top-color: $color-value; // border top color
border-right-color: $color-value; // border right color
border-bottom-color: $color-value; // border bottom color
border-left-color: $color-value; // border left color

Ví dụ

CSS Shorthand border

Shorthand border là cú pháp viết tắt giúp cho chúng ta cấu hình border-style, border-width, border-color trong cùng 1 dòng code

Cú pháp

border: border-width border-style border-color;

Shorthand border với border sides

Chúng ta có cú pháp shortand border cho 1 cạnh như sau:

border-top: border-width border-style border-color; // top
border-right: border-width border-style border-color; // right
border-bottom: border-width border-style border-color; // bottom
border-left: border-width border-style border-color; // left

Ví dụ

Rounded border(bo góc)

Khi muốn bo tròn border chúng ta sẽ sử dụng border-radius để thao tác

Cú pháp

border-radius: value;