Khung viền đẹp chứa nội dung cho blog chuyên nghiệp

1. Dạng 1.
Code:

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

Demo: 

Hãy đến với trang https://ebook.hoit.asia sẽ là nơi tổng hợp rất nhiều tài liệu liên quan đến các kiến thức phổ thông. Trong đó, có tuyển tập các dạng bài tập cho các môn thi khoa học tự nhiên, khoa học xã hội góp phần giúp học sinh nắm vững kiến thức trước khi bước vào kì thi THPT Quốc gia cũng như tuyển sinh 10.

Chú ý: Để đổi các dạng các đường viền ta chọn chữ màu đỏ, độ dày đường nét ta chọn số màu xanh ở phía trên là để đổi tên dạng đường nét, màu    ,để đổi mã màu đường nét (trang web xem mã màu: http://mamauhtml-css.vpssim.vn/)

- Dạng nét liền: solid     ______

- Dạng dấu chấm: dotted  .........

- Dạng dấu nét đứt: dashed  _ _ _ _

- Dạng nét đôi: double =

- Dạng đường rãnh: groove salmon (bỏ mã màu phía sau)

<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 salmon

- Dạng đổ bóng bên trong: inset

- Dạng đổ bóng bên ngoài: outset

- 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 #008000; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

2. Dạng 2. 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ụ:

<div style="border: 2px solid #008000; max-height: 150px; overflow: auto; padding: 8px; word-wrap: break-word;"> Đặt nội dung vào đây
</div>

Demo:

Hãy đến với trang https://ebook.hoit.asia sẽ là nơi tổng hợp rất nhiều tài liệu liên quan đến các kiến thức phổ thông. Trong đó, có tuyển tập các dạng bài tập cho các môn thi khoa học tự nhiên, khoa học xã hội góp phần giúp học sinh nắm vững kiến thức trước khi bước vào kì thi THPT Quốc gia cũng như tuyển sinh 10.

3. Dạng 3.
Code:

<pre style="background-color: white; border: 0px; color: #333333; font-family: inherit; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 1.5em; overflow-wrap: normal; overflow: auto; padding: 0px; vertical-align: baseline;"> {đặt nội dung bài viết}

</pre>

Demo:

Hãy đến với trang https://ebook.hoit.asia sẽ là nơi tổng hợp rất nhiều tài liệu liên quan đến các kiến thức phổ thông. 
Trong đó, có tuyển tập các dạng bài tập cho các môn thi như: 
khoa học tự nhiên, khoa học xã hội góp phần giúp 
học sinh nắm vững kiến thức trước khi bước vào kì thi THPT Quốc gia cũng như tuyển sinh 10.

4. Dạng 4. Cho phép Chọn tất  cả nội dung trong khung bài viết
Code:

<form name="MyTextBoxForm">
<input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all" />
<textarea cols="60" name="MyTextBox" rows="4" style="background: rgb(238, 238, 238); border: 1px dashed rgb(160, 196, 234); color: #464646; height: 100px; margin: 2px; width: 100%;" wrap="on">
Đây là nội dung hiển thị 

</textarea> </form>

Demo:

Đây là nội dung hiển thị