Tổng quát

3 thuộc tính border cần nắm rõ đó là:

• border-style: Kiểu border sẽ hiển thị
• border-width: Độ rộng border
• border-color: Màu border

Cách sử dụng đơn giản

border-style được dùng để khai báo kiểu border

border-style: Value;

Value có thể nhận một trong các giá trị sau::non, dotted, dashed, solid, double, groove, ridge, inset, outset

Ví dụ:

border-style: none -> Không có border

border-style: dotted -> Border dạng chấm

border-style: dashed -> Border dạng gạch nối

border-style: solid -> Border liền

border-style: double -> Border đôi, có độ rộng bằng giá trị border-width

border-style: groove -> Border 3D, hiệu ứng này phụ thuộc vào giá trị màu của border

border-style: ridge -> Border 3D nổi, và cũng phụ thuộc vào giá trị màu border

border-style: inset

border-style: outset

border-width được dùng để khai báo độ rộng border, bạn có thể dùng 1 trong 2 cách sau:

border-width:5px; /* độ rộng border sẽ được tính theo pixels.*/
border-width:medium; /* độ rộng sẽ nhận 1 trong 3 giá trị:  thin, medium và thick. */

Tương tự như background-color, border-color có các kiểu khai báo:

border-color:red;	/* Dùng theo tên màu */
border-color:#98bf21; 	/* Dùng theo giá trị màu trong hệ thập lục phân */
border-color: rgb(255,0,0) /* Dùng theo chế độ RGB */

Cách sử dụng border cho từng bên riêng rẽ

Mặc định border xuất hiện xung quanh thẻ div, để đặt border cho từng phần riêng, ta dùng như sau:

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;

Hoặc dùng cách viết ngắn (trên - phải - dưới - trái):

border-style:dotted solid double dashed; /* border trên kiểu chấm, border bên phải kiểu liền, border dưới kiểu đôi, border trái kiểu gạch nối */
border-style:dotted solid dashed; /* border trên kiểu chấm, border 2 bên phải và trái kiểu liền, border dưới kiểu gạch nối */
border-style:dotted solid; /* border trên và dưới kiểu chấm, border 2 bên phải và trái kiểu liền */
border-style:solid 	/* Cả 4 đường border đều liền */

Cách sử dụng ngắn

Thông thường chúng ta sử dụng border với một kiểu cho tất cả các đường biên, cách sử dụng ngắn như sau

border:5px solid red;