Các code đường viền cơ bản trong HTML

1. Các code đường viền cơ bản

 Trong phần này Sera sẽ giới thiệu đến các bạn 8 code đường viền cơ bản:

Dạng nét liền (solid)

<div style="padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng dấu chấm (dotted)

<div style="padding: 8px; border: 2px dotted #FF69B4; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng nét đứt (dashed)

<div style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng nét đôi (double)

<div style="padding: 8px; border: 6px double #8A2BE2; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng đường rãnh (groove)

<div style="padding: 8px; border: 10px groove salmon; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng chóp (ridge)

<div style="padding: 8px; border: 10px ridge salmon; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng đổ bóng bên trong (inset)

<div style="padding: 8px; border: 10px inset #8FBC8F; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng đổ bóng bên ngoài (outset)

<div style="padding: 8px; border: 10px outset #8FBC8F; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

 Ngoài ra các bạn cũng có thể kết hợp các code đường viền ở trên thành những dạng đường viền hỗn hợp, ví dụ như thế này nè:

Cái khung này được Sera kết hợp từ 3 loại đường viền: outset, groove và inset

 Hay cái này:

Cái khung này được Sera kết hợp từ 4 loại đường viền: solid, dashed, dotted và double

 Hoặc có thể thêm thuộc tính border-radius để bo tròn 4 góc, ví dụ như thế này:

<div style="border-radius: 25px; padding: 8px; border: 2px solid#FF1493; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

 Nếu nội dung trong khung quá dài, các bạn có thể dùng thuộc tính overflow kết hợp với max-height (hoặc height) để thu gọn lại (và sẽ xuất hiện thanh cuộn), ví dụ:

Code:

<div style="max-height: 150px; overflow: auto; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.</div>

 Kết quả:

Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.

 Chú ý chung:

 Phần chữ màu đỏ là độ dày của đường viền

 Phần chữ màu xanh lá là loại đường viền (solid, dotted, dashed,…)

 Phần chữ màu hồng là màu đường viền, có thể sử dụng tên gọi của màu (red, black,…), mã màu hex (#ffffff, #ff0000,…) hoặc các loại mã màu khác để thay màu cho đường viền. Về phần mã màu hex thì các bạn có thể xem và lấy mã màu ở ĐÂY nhé 

 Ba thành phần này có thể đổi chỗ cho nhau, kết quả đều không thay đổi.

 Có thể sử dụng các thẻ <div>, <p>, <span> tuỳ trường hợp, không nhất thiết phải dùng thẻ <div> như trong code mẫu.