Border css là gì
Đường viền Border CSS thường được sử dụng nhiều nhất khi viết code cho website. Nó sẽ có nhiều thuộc tính định dạng đi kèm như border-style, border-width, border-color. Vậy bạn đã biết cách sử dụng border trong CSS như thế nào chưa. Hãy đọc bài viết sau của mình nhé. Border được dùng để định dạng đường viền cho phần tử HTML. Cấu trúc như sau: tag { Thuộc tính: giá trị; }Các thuộc tính định dạng Border CSSDưới đây là những kiểu định dạng thường dùng khi viết mã: 1. Border-widthBorder-width sẽ thiết lập chiều rộng cho đường viền. Đơn vị dùng là px, thin, medium, thick. Ví dụ: .header { border-width: 1px; }2. Border-colorBorder-color dùng để thiết lập màu sắc cho đường viền. Ví dụ: .footer { border-color: #eee; }3. Border-styleNó được dùng để xác định kiểu border sẽ hiển thị. Có nhiều kiểu khác nhau như: Viết rút gọn code cho border Khi viết mã nên rút gọn lại: Giải thích:
Các thuộc tính vị trí trong Border CSSThuộc tính vị trí cũng được áp dụng khi viết code. 1. border-topNó sẽ xác định đường viền phía trên phần tử HTML. Ví dụ: border-top: 2px double #ddd;2. Border-bottomNó sẽ xác định border phía bên dưới. border-bottom: 2px dotted #666;3. Border-leftNó sẽ xác định đường viền bên trái. Ví dụ: border-left: 3px dashed #666;4. Border-rightNó sẽ xác định đường viền bên phải. border-right: 1px dashed red;Ngoài ra cũng có sự kết hợp giữa thuộc tính định và vị trí lại border-left-width border-left-style border-left-color border-top-width border-top-style border-top-color border-right-width border-right-style border-right-color border-bottom-width border-bottom-style border-bottom-colorVí dụ về một số kiểu Border CSS Hãy chạy ví dụ sau: Kết quả: Kiểu dotted border: 2px dotted red;Border CSS được hỗ trợ trên hầu hết mọi trình duyệt như Google Chrome, Opera, Firefox, IE, Safari. Bài viết này mình đã giới thiệu đến bạn thuộc tính Border trong CSS. Sau khi đọc xong bạn hãy áp dụng cho website của mình để trang trí cho nó đẹp, chuyên nghiệp hơn nhé. Thuộc tính border trong CSS giúp bạn xác định style, độ rộng và màu của đường viền bao quanh một phần tử. Tương ứng, bạn sẽ có ba thuộc tính sau giúp bạn thực hiện việc này:
Phần tiếp theo, mình sẽ trình bày chi tiết từng thuộc tính cũng như các giá trị có thể của mỗi thuộc tính này trong CSS. Thuộc tính border-color trong CSSĐể xác định màu cho đường viền trong CSS, bạn sử dụng thuộc tính border-color. Ngoài việc xác định màu cho toàn bộ đường viền bao quanh phần tử, bạn cũng có thể xác định riêng rẽ màu cho từng phần của đường viền, chẳng hạn như phần trên, đáy, cạnh trái hoặc cạnh phải. Tùy theo mục đích, bạn sử dụng một trong các thuộc tính sau đây.
Các thuộc tính trên có thể nhận giá trị màu hợp lệ (bạn tham khảo chương Màu trong CSS), Ví dụ sau minh họa cách sử dụng các thuộc tính này trong CSS. Vi du hien thi Border voi cac mau khac nhau tren cac canh. Vi du hien thi Border voi mau duy nhat tren tat ca cac canh. Kết quả là: Thuộc tính border-style trong CSSĐể xác định xem style của đường viền là solid, dotted, dashed, double, …, bạn có thể sử dụng thuộc tính border-style trong CSS. Thuộc tính này có thể nhận các giá trị sau:
Giống như thuộc tính border-color, bạn cũng có thể xác định style riêng cho từng phần (trên, đáy, cạnh trái, cạnh phải) của đường viền. Các thuộc tính là:
Dưới đây là ví dụ minh họa cách sử dụng các thuộc tính trên trong CSS. Vi du Border co dang la none. Vi du Border dang solid. Vi du Border dang dahsed. Vi du Border dang double. Vi du Border dang groove. Vi du Border dang aridge. Vi du Border dang inset. Vi du Border dang outset. Vi du Border dang hidden. Vi du Border voi 4 Style khac nhau cho cac canh. Kết quả là: Thuộc tính border-width trong CSSSử dụng thuộc tính border-width trong CSS giúp bạn thay đổi độ rộng của đường viền bao quanh một phần tử. Thuộc tính này có thể nhận một giá trị đo chiều dài với đơn vị là px, pt hoặc cm hoặc có thể là thin, medium hoặc thick. Để xác định độ rộng cho từng cạnh của đường viền, bạn có thể sử dụng các thuộc tính sau:
Sau đây là ví dụ minh họa cách sử dụng các thuộc tính trên trong CSS. Vi du Border dang solid co do rong la 2px. Vi du Border dang solid co do rong la 6pt. Vi du Border dang solid co do rong la thin. Vi du Border dang solid co do rong la medium. Vi du Border dang solid co do rong la thick. Vi du Border dang solid co do rong khac nhau cho cac canh. Kết quả là: Thuộc tính border trong CSSSử dụng thuộc tính border trong CSS, bạn có thể tối thiểu hóa lượng code cần viết mà vẫn có thể xác định đầy đủ style cho đường viền. Trong phần style rule xác định cho thuộc tính border, bạn bắt buộc phải xác định giá trị cho thuộc tính border-style. Dưới đây là ví dụ minh họa cho cách sử dụng thuộc tính border trong CSS: Vi du xac dinh tat ca cac gia tri lien quan toi Border chi trong mot Style Rule. Kết quả là: |