Bạn đang xem bài viết Kiến thức về CSS (P4): Thuộc tính border. Một vài liên kết tham khảo: thiết kế web du lịch thiết kế web trọn gói
Trong CSS, có những thuộc tính chung cơ bản mà người làm web ai cũng phải biết, đối với các bạn đang tự học thiết kế web đây là kiến thức hữu ích. Trong bài hôm nay chúng ta sẽ tìm hiểu thuộc tính border trong CSS.
Thuộc tính border là gì?
Thuộc tính border trong CSS được sử dụng để thiết lập tất cả các Style liên quan tới đường viền của một phần tử. Chẳng hạn như màu, độ rộng, style của đường viền. Nói một cách dễ hình dung thuộc tính border là thuộc tính để tạo đường viền.
Thuộc tính border được chia ra làm 2 loại là thuộc tính định dạng và thuộc tính vị trí:
Thuộc tính định dạng
Thuộc tính vị trí
Với thuộc tính và giá trị như sau:
Kiểu cho border:
Những điều không nên bỏ qua về CSS border:
Để chỉnh độ dày mỏng của đường viền các bạn có thể sử dụng Đoạn css trên sẽ cho chúng ta một đường viền (border) với kích thước là 1px, ngoài ra các bạn còn có thể tùy chỉnh độ dày mỏng của đường viền như sau :
1 2 3 | border-width : thick ; border-style : solid ; border-color : black ; |
Bằng cách chỉ định giá trị border-width , chúng ta sẽ có những đường viền với độ dày mỏng khác nhau như bên dưới:
Border-Radius
border-radius là một cải tiến có trong CSS3, với thuộc tính này, chúng ta sẽ dễ dàng bo tròn đường viền góc của đối tượng . Để có thể chạy tốt trên mọi trình duyệt, các bạn cần phải khai báo đầy đủ như sau :
1 2 3 | -webkit-border-radius: 10px ; -moz-border-radius: 10px ; border-radius: 10px ; |
ví dụ mà border-radius có thể làm được với những giá trị khác nhau :
Trong khi các giá trị solid, dashed, dotted thường được sử dụng nhất thì thuộc tính border-style còn cung cấp các giá trị như là groove vàridge
1 | border : 20px groove #e3e3e3 ; |
Xem thêm:
Chúc các bạn tự học thiết kế web thật hiệu quả. Nhớ theo dõi tiếp các bài viết hữu ích về kiến thức CSS ở các bài viết sau nhé.
Nguồn bài viết: Kiến thức về CSS (P4): Thuộc tính border