CSS3: Cách dùng border

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,…Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để định border cho các đối tượng web.

Thuộc tính border-width

border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels. Xem hình minh họa bên dưới.

Thuộc tính border-color

border-color là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.

Thuộc tính border-style

border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây (tất cả viền có màu vàng).

CSS các loại đường viền

Ví dụ: Ví dụ sau sẽ định viền cho 3 thành phần h1, h2, p như sau:

h1 {
  border-width:thin;
  border-color:#FF0000;
  border-style:solid
}

h2 {
  border-width:thick;
  border-color:#CCC;
  border-style:dotted
}

p {
  border-width:5px;
  border-color:#FF00FF;
  border-style:double
}

Ngoài ra, chúng ta cũng có thể dùng riêng các thuộc tính border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng.

Ví dụ:

h1 {
  border-top-width:thin;
  border-top-color:#FF0000;
  border-top-style:solid;
  border-right-width:thick;
  border-right-color:#AFAFAF;
  border-right-style:dotted;
  border-bottom-width:2px;
  border-bottom-color:blue;
  border-bottom-style:double;
  border-left-width:5px;
  border-left-color:violet;
  border-left-style:groove
}

Thuộc tính border rút gọn:

Để dễ nhớ chúng ta có thể sử dụng cấu trúc rút gọn của CSS như sau:

border:<border-width> | <border-color> | <border-style>

Dưới đây là bảng mô tả chi tiết các thuộc tính border.

Thuộc tính

Mô tả

Ví dụ

NN

IE

W3C

border

Một thuộc tính tốc hành để thiết lập thuộc tính cho toàn bộ cả 4 đường bao trong một khai báo.

border-width
border-style
border-color

4.0

4.0

CSS1

border-bottom

Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đáy trong một khai báo.

border-bottom-width
border-style
border-color

6.0

4.0

CSS1

border-bottom-color

Thiết lập màu sắc của đường bao đáy

border-color

6.0

4.0

CSS2

border-bottom-style

Thiết lập kiểu cách của đường bao đáy.

border-style

6.0

4.0

CSS2

border-bottom-width

Thiết lập độ rộng của đường bao đáy

thin
medium
thick
length

4.0

4.0

CSS1

border-color

Thiết lập màu sắc của bốn đường bao, có thể đạt màu từ một đến bốn.

color

6.0

4.0

CSS1

border-left

Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao trái trong một khai báo.

border-left-width
border-style
border-color

6.0

4.0

CSS1

border-left-color

Thiết lập màu sắc của đường bao trái.

border-color

6.0

4.0

CSS2

border-left-style

Thiết lập kiểu cách của đường bao trái.

border-style

6.0

4.0

CSS2

border-left-width

Thiết lập độ rộng của đường bao trái.

thin
medium
thick
length

4.0

4.0

CSS1

border-right

Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao phải trong một khai báo.

border-right-width
border-style
border-color

6.0

4.0

CSS1

border-right-color

Thiết lập màu sắc của đường bao phải.

border-color

6.0

4.0

CSS2

border-right-style

Thiết lập kiểu cách của đường bao phải.

border-style

6.0

4.0

CSS2

border-right-width

Thiết lập độ rộng của đường bao phải.

thin
medium
thick
length

4.0

4.0

CSS1

border-style

Thiết lập kiểu cách của cả bốn đường bao, có thể đạt được kiểu từ một đến bốn.

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

6.0

4.0

CSS1

border-top

Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đỉnh trong một khai báo.

border-top-width
border-style
border-color

6.0

4.0

CSS1

border-top-color

Thiết lập màu sắc của đường bao đỉnh. 

border-color

6.0

4.0

CSS2

border-top-style

Thiết lập kiểu cách của đường bao đỉnh.

border-style

6.0

4.0

CSS2

border-top-width

Thiết lập độ rộng của đường bao đỉnh

thin
medium
thick
length

4.0

4.0

CSS1

border-width

Một thuộc tính tốc hành để thiết lập độ rộng của 
bốn đường bao trong một khai báo, có thể có từ một đến bốn giá trị.

thin
medium
thick
length

4.0

4.0

CSS1

» Tiếp: Cách dùng width và height
« Trước: CSS cho <Span> & <Div>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!