Thuộc tính Border trong CSS

Tiếp theo loạt bài viết về Box Model, hôm nay chúng ta sẽ cùng tìm hiểu về thuộc tính Border trong CSS. Đây cũng là một thuộc tính khá quan trọng. Khi thuộc tính Border được khai báo cho phép chúng có thể quy định độ dày, màu sắc và kiểu hiện thị đường viền của một thành phần nào đó, tạo ra sự phân biệt giữa các thành phần với nhau trong trang web được rõ ràng hơn.

Các giá trị của border bao gồm:
- border-width: độ dày của đường viền.
- border-style: kiểu đường viền.
- border-color: màu của đường viền

Để đường viền được hiện thị thì giá trị border-style luôn phải được khai báo.

Border Width

Border-width sẽ quy định độ dày của đường viền.
Các giá trị của border-width được tính bằng px, hay có thể sử dụng 1 trong 3 giá trị: thin, medium, thick.Ví dụ:

p{ border-style: solid; border-width: 1px;}

Đoạn văn bản này được hiển thị với giá trị solid và có border-width: 1px

Border style

Border-style sẽ quy định kiểu dáng hiển thị của đường viền, những ví dụ bên dưới cho thấy kiểu dáng hiện thị tương ứng của chúng.

none: không hiển thị đường viền (mặc định khi không được khai báo)

Hiển thị với giá trị solid

Hiển thị với giá trị dashed

Hiển thị với giá trị dotted

Hiển thị với giá trị double

Hiển thị với giá trị groove

Hiển thị với giá trị ridge

Hiển thị với giá trị inset

Hiển thị với giá trị outset

Border Color

Border-color sẽ quy định màu sắc của đường viền được hiển thị. Giá trị màu có thể là:

Tên màu (tên tiếng anh): red, white, black . . .
Hệ RGB – ví dụ: rgb(255,155,0)
Hệ Hex – ví dụ: #ff0000

Ngoài ra border-color còn có giá trị ”transparent” (trong suốt). Tuy nhiên thì giá trị này không mấy khi được dùng tới. Bởi vì mục đích của chúng ta là muốn đường viền được hiển thị.
Ví dụ:

p{ border-style: solid; border-width: 1px; border-color: #000000 }

Giá trị border của cạnh riêng biệt

Chẳng hạn khi viết mã CSS như sau:

`1`	`.myborder{` `border-style:` `solid` `}`

Thì tất cả các cạnh sẽ được hiển thị với giá trị solid, nhưng có lúc nào đó trong thiết kế của bạn, bạn chỉ muốn một cạnh nào đó được hiện thị mà thôi, hay mỗi cạnh có một kiểu hiện thị khác nhau thì sao? Để giải quyết vấn đề này thì chúng ta sẽ viết mã CSS cho từng cạnh riêng biệt.

Ví dụ sau thì mỗi cạnh sẽ được hiển thị với một kiểu khác nhau.

.myborder{
   border-top-style: solid;
   border-right-style: dashed;
   border-bottom-style: dotted;
   border-left-style: double;
}

Khi chỉ muốn cạnh nào đó hiển thị thì bạn chỉ cần viết CSS cho cạnh đó thôi.
Ví dụ sau chỉ hiện thị cạnh trên cùng.

.myborder{ border-top-style: solid }

Giá trị width và color cho viền cũng tương tự vậy:

.myborder{
   border-top-width: solid;
   border-right-width: dashed;
   border-bottom-width: dotted;
   border-left-width: double;
}

.myborder{
   border-top-color: solid;
   border-right-color: dashed;
   border-bottom-color: dotted;
   border-left-color: double;
}

Cách viết tắt đối với thuộc tính border

Xét lại ví dụ sau:

p{
   border-style: solid;
   border-width: 1px;
   border-color: #000000;
}

Ta nhận thấy các thành phần border-style, border-width, border-color được viết riêng biệt với các giá trị tương ứng.

Để đơn giản hơn chúng ta sẽ gộp chung lại để tiện cho việc chỉnh sửa cũng như làm giảm tối đa dung lượng của file CSS xuống mức thấp nhất có thể. Và đây cũng là cách hay được sử dụng nhất.

Từ ví dụ trên, ta sẽ viết chung tại như sau, đây gọi là cách viết tắt trong CSS.

p { border: 1px solid #000000 }

Như vậy đoạn mã nhìn gọn gàng hơn rất nhiều. Thứ tự để viết tắt cho thuộc tính border như sau:

border-width
border-style
border-color

tag {border: <border-width> <border-width> <border-width>;}

Chúng ta cũng có thể viết tắt cho từng cạnh riêng biệt như sau:

p{ border-top: 1px solid red }

Do Whatever You Like