Học CSS: Sự khác nhau giữa lệnh border và border-radius

Bài viết hôm nay, http://trangthietbihiendai.blogspot.com/ sẽ hướng dẫn các bạn về lệnh border đồng thời phân biệt được sự khác nhau giữa border và border-radius.

Như đã giới thiệu về CSS ở các bài trước, để viết CSS đúng cú pháp thì phải viết theo công thức "tên lệnh:lệnh". Đối với lệnh border cũng như vậy.

1/ LỆNH BORDER

Tên lệnh

Lệnh border (viền) bao gồm các vị trí trên, phải, dưới, trái theo tên border-top, border-right, border-bottom, border-left.

Lệnh

Trong phần lệnh gồm: độ dày đường viền(1px,2px,3px...), kiểu đường viền(solid,thin,dashed), màu đường viền(#000,#111111,#aaa,#bbbbbb,#a1a1a1...). Để đường viền có thể nhìn thấy, độ dày đường viền phải có giá trị nhỏ nhất là 1px và nếu muốn dày hơn thì cứ tăng số lên. Trong kiểu đường viền solid nghĩa là viền liền nét, thin là mỏng, dashed là đứt nét. Màu đường viền giống như màu sau tên lệnh color, được quy định viết tối thiểu sau dấu # là #3số và tối đa #6số.

Ví dụ, khi tôi muốn viền trái đối tượng là dòng chữ "Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog" thì sẽ viết:

<div style='border-left:1px solid red'>Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog</div>

...và hiển thị

Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog

Nếu muốn cho nền có màu thì thêm lệnh background:

<div style='border-left:1px solid red;background:#ccc'>Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog</div>

...và hiển thị

Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog

2/ LỆNH BORDER-RADIUS

Thật ra, border-radius cũng chẳng khác gì so với border. Tuy nhiên, nó mang ý nghĩa "bo tròn" vị trí của các góc.

Tên lệnh

Lệnh này gồm các tên lệnh con như border-top-left-radius (bo tròn góc trên bền trái), border-top-right-radius (bo tròn góc trên bên phải), border-bottom-left-radius(bo tròn góc dưới bên trái), border-bottom-right-radius(bo tròn góc dưới bên phải).

Lệnh

Giống như lệnh của border

Ví dụ, khi tôi muốn bo tròn góc trên bên phải của đối tượng "Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog" có màu chữ trắng, nền đen thì sẽ viết:

<div style='border-top-right-radius:5px;color:white;background:black'>Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog</div>

...và hiển thị

Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog

Muốn bo tròn hết 4 góc thì viết:

<div style='border-radius:5px;color:white;background:black'>Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog</div>

...và hiển thị

Học CSS cùng http://trangthietbihiendai.blogspot.com/ Blog