Cách làm border trong css
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:
Show
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.
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.
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.
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:
Kết quả là: |