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-style, border-width và border-color
Để đường viền được hiện thị thì giá trị border-style luôn phải được khai báo.

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)

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

.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 }

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

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 }

Tagged as: border trong css, CSS Box model, thuoc tinh border, Thuoc tinh CSS

Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

• Độ lớn thực sự của Box
• Margin và Padding trong CSS
• 5 cách viết tắt thường dùng trong CSS
• Tổng hợp các bài học CSS
• CSS Image Sprites là gì?