Chỉnh khung viền đẹp cho bài đăng trong trang web và blog

Trong quá trình viết bài đăng trên web hoặc blog, để trang trí khung viền cho bài viết nhìn bắt mắt và hợp lý, bạn sẽ phải dùng tới những code trong web để làm điều đó. Dưới đây là tổng hợp những khung viền để bạn có thể tạo khung cho bài viết của mình thêm sinh động.

1. Khung nét liền bo bốn góc

2. Khung nét đứng bo góc phải dưới

3. Khung dấu chấm

4. Khung đường đôi bo góc phải trên

5. Khung đường rãnh

6. Khung đổ bóng ngoài bo 4 góc

7. Khung đổ bóng trong

8. Khung hình chóp bo hình tròn

9. Khung nét đứt quá dài kết hợp Overflow với max-height sẽ xuất hiện thanh cuộn

1. Khung nét liền bo bốn góc

Mẫu	<div style="background-color: white; border-radius: 20px; padding: 12px; border: 2px solid #FF1493; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; margin-bottom: 1.25rem; overflow-wrap: break-word; padding: 7px;">NỘI DUNG</div>
Thuộc tính
Độ dày		Nét liền	Màu	Góc
2		Solid	#FF1493	Radius (Bo tròn 4 góc)

2. Khung nét đứng bo góc phải dưới

Mẫu	<div style="background-color: white; border-bottom-right-radius: 20px; padding: 12px; border: 2px dashed #FF69B4; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 7px;">NỘI DUNG</div>
Thuộc tính
Độ dày		Nét đứt	Màu	Góc
2		Dashed	#FF69B4	bottom-right-radius (Bo tròn góc dưới phải)

3. Khung dấu chấm

Mẫu	<div style="background-color: white; border: 2px dotted  #FF4500; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 7px;">NỘI DUNG</div>
Thuộc tính
Độ dày		Dấu chấm	Màu	Góc
2		Dotted	#FF4500	không

4. Khung đường đôi bo góc phải trên

Mẫu	<div style="background-color: white; border-top-right-radius: 20px; padding: 12px; border: 8px double #8A2BE2; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 7px;">NỘI DUNG</div>
Thuộc tính
Độ dày		Đường đôi	Màu	Góc
8		Double	#8A2BE2	top-right-radius (Bo tròn góc phải trên)

5. Khung đường rãnh

Mẫu	<div style="background-color: white; border: 12px groove salmon; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 7px;">NỘI DUNG</div>
Thuộc tính
Độ dày		Đường rãnh	Màu	Góc
12		Groove	salmon	Không

6. Khung đổ bóng ngoài bo 4 góc

Mẫu	<div style="background-color: white; border-radius: 20px; border: 12px outset #8FBC8F; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 7px;">NỘI DUNG</div>
Thuộc tính
Độ dày		Bóng ngoài	Màu	Góc
12		Outset	#8FBC8F	Radius (Bo tròn 4 góc)

7. Khung đổ bóng trong

Mẫu	<div style="background-color: white; border: 12px inset #8FBC8F; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 7px;">NỘI DUNG</div>
Thuộc tính
Độ dày		Bóng trong	Màu	Góc
12		Inset	#8FBC8F	Không

8. Khung hình chóp bo hình tròn

Mẫu	CHÈN NỘI       DUNG VÀO   ĐÂY <div style="background-color: white; border-radius: 50%; border: 12px ridge salmon; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; height: 150px; padding: 7px; width: 150px;"><span face="&quot;arial&quot; , &quot;helvetica&quot; , sans-serif" style="box-sizing: border-box; font-size: 16px;"><br /><br /> <span style="box-sizing: border-box; font-weight: 700;">&nbsp; &nbsp; CHÈN NỘI&nbsp; &nbsp; &nbsp; &nbsp;DUNG VÀO&nbsp; &nbsp; &nbsp;ĐÂY</span></span></div>
Thuộc tính
Độ dày		Chóp	Màu	Góc
12		Ridge	salmon	radius: 50% (Bo hình tròn)

9. Khung nét đứt quá dài kết hợp Overflow với max-height sẽ xuất hiện thanh cuộn

Mẫu	<div style="background-color: white; border: 3px dashed #FF1493; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; max-height: 100px; overflow-wrap: break-word; overflow: auto; padding: 7px;"><span style="box-sizing: border-box; color: black; font-family: &quot;arial&quot;; font-size: small;"><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">NỘI DUNG </span></span></div>
Thuộc tính
Độ dày		Nét đứt	Màu	Thanh cuộn
3		dashed	#FF1493	max-height: 100px; overflow: auto

 

Trên đây là những khung viền mình làm sơ, bạn có thể thay những thuộc tính tùy thích theo sở thích của minh để tạo ra khung viền đẹp cho mình.