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 Tanchau123 Blog" thì sẽ viết:
<div style='border-left:1px solid red'>Học CSS cùng Tanchau123 Blog</div>
...và hiển thị
Học CSS cùng Tanchau123 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 Tanchau123 Blog</div>
...và hiển thị
Học CSS cùng Tanchau123 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 Tanchau123 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 Tanchau123 Blog</div>
...và hiển thị
Học CSS cùng Tanchau123 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 Tanchau123 Blog</div>
...và hiển thị
Học CSS cùng Tanchau123 Blog
Đăng nhận xét