Trong bài viết này, mình sẽ chia sẻ đến các bạn những đoạn mã HTML và CSS giúp tạo khung văn bản (text box) thật đẹp và ấn tượng. Những khung này không chỉ giúp làm nổi bật nội dung quan trọng mà còn tăng tính thẩm mỹ, giúp bài viết sinh động và cuốn hút hơn.

Khung text mẫu HTML CSS đẹp

Những code tạo mã khung bên dưới, bạn chỉ cần copy và dán vào bài viết của bạn là nó sẽ ra.

Khung ghi chú và thông báo mẫu 1

Để sử dụng các bạn copy đoạn code dưới đây vào trình soạn thảo ở chế độ Text. Nhớ dán trong chế độ soạn thảo HTML(Nhấn sang Mã để dán).

<div style="background: #ebf6e0; border-radius: 2px; border: 1px solid #b3dc82; box-sizing: border-box; float: none; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline; color: #5f9025; font-family: arial, sans-serif; font-size: 15px;"><strong>Note: </strong>CanhDeals.com không chỉ là nơi săn deal mua sắm thông thường mà còn là nguồn tổng hợp mã giảm giá uy tín dành riêng cho những ai đang tìm kiếm các dịch vụ <strong>Hosting, VPS, Máy chủ (Server), Tên miền</strong> từ các nhà cung cấp hàng đầu như: <strong>Hawk Host, AZDIGI, TinoHost, Vietnix, Namecheap, Porkbun, GoDaddy, Hostinger.</strong></div>

Thêm một mẫu thông báo đỏ

<div style="background: #ffe9e9; border-radius: 2px; border: 1px solid #fbc4c4; box-sizing: border-box; color: #de5959; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;">Thông báo: Nội dung thông báo</div>
</div>

<div></div>
<div class="symple-box yellow center " style="background: #fffdf3; border-radius: 2px; border: 1px solid #f2dfa4; box-sizing: border-box; color: #c4690e; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;">

<strong style="background: transparent; border: 0px; box-sizing: initial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Lưu ý</strong>:
<ul style="background: transparent; border: 0px; box-sizing: initial; margin: 0px 0px 20px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
 	<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Mỗi khách hàng chỉ được sử dụng mỗi coupon 1 lần duy nhất.</li>
 	<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Chu kỳ 36 tháng: Giảm 50%. Mã áp dụng: <strong>VPSH50</strong> - <a href="https://portal.vietnix.vn/aff.php?aff=4430&amp;url=https://vietnix.vn/maxspeed-hosting/" target="_blank" rel="nofollow noopener">Vietnix</a></li>
 	<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Thời gian áp dụng chương trình: Từ ngày 01/07/2025 đến hết ngày 31/07/2025.</li>
</ul>
</div>
<div></div>

Khung quy định bình luận

Bạn thấy các khung quy định bình luận này đẹp thì copy dán vào nhé. Mình để ở dưới đây.

<div style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; box-sizing: inherit; margin-bottom: 10px; padding: 15px; line-height: 1.6em;"><span style="box-sizing: inherit; font-weight: bold; line-height: 2.0em;"><span style="color: black;"> Lưu ý:</span></span>
<span style="color: #222222;">» Địa chỉ email của bạn được bảo mật.</span>
<span style="color: #222222;">» Mục không có dấu sao (*) là không bắt buộc.</span>
<span style="color: #222222;">» Bình luận bằng tiếng Việt có dấu nếu có thể.</span></div>

<div></div>
<div style="background: linear-gradient(40deg,#4caf5014,#ffeb3b17); border-radius: 3px; border: 3px solid #d5d5d500; color: #333333; border-image-source: linear-gradient(to right, #4caf5080, #9c27b0a8, #03a9f4a6); border-image-slice: 1; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1em; vertical-align: baseline;">Note: CanhDeals.com không chỉ là nơi săn deal mua sắm thông thường mà còn là nguồn tổng hợp mã giảm giá uy tín dành riêng cho những ai đang tìm kiếm các dịch vụ Hosting, VPS, Máy chủ (Server), Tên miền từ các nhà cung cấp hàng đầu như: Hawk Host, AZDIGI, TinoHost, Vietnix, Namecheap, Porkbun, GoDaddy, Hostinger.</div>
<div></div>

Code tạo khung text mẫu HTML CSS – Blockquote

Cách phối màu khung này khá nhẹ nhàng và dễ chịu nên đưa vào các bạn xem thêm.

Lý do nên theo dõi CanhDeals.com mỗi ngày:
✅ Cập nhật deal mới liên tục từ các nhà cung cấp trong và ngoài nước.
✅ Chỉ chọn lọc mã giảm giá còn hiệu lực, không lãng phí thời gian.
✅ Có đánh giá, hướng dẫn sử dụng, giúp bạn chọn gói dịch vụ phù hợp.

Code ở đây

<blockquote style="-webkit-text-stroke-width: 0px; background: #e8f9f4; border: 1px solid #8ee3c8; box-sizing: border-box; clear: right; color: #181818; font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, sans-serif; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; margin: 1.5em 0px; orphans: 2; padding: 1.6em; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><strong style="box-sizing: border-box; font-weight: 500;">Lý do nên theo dõi CanhDeals.com mỗi ngày:</strong>
✅ Cập nhật deal mới liên tục từ các nhà cung cấp trong và ngoài nước.
✅ Chỉ chọn lọc mã giảm giá còn hiệu lực, không lãng phí thời gian.
✅ Có đánh giá, hướng dẫn sử dụng, giúp bạn chọn gói dịch vụ phù hợp.</blockquote>

Trước mắt cập nhật vài mẫu trên, các bạn biết khung text nào đẹp, giới thiệu cho mình viết với nhé.