Tổng hợp code CSS viền trang trí website 2020

Lần nào viết nội dung cũng chẳng nhớ css viền trang trí. Gúm khổ thật, nay viết luôn một bài lưu lại để khỏi mất công tìm. Các bạn nào chưa biết thì tham khảo bài viết này luôn nhé!

Quan tâm nhiều: Thiết kế website Cam Ranh

Các CSS mẫu viền trang trí cơ bản

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

+ Dạng nét liền

<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

<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

<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

<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

<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

<div style=”padding: 8px; border: 10px ridge salmon; 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ụ: Mã code

<div style=”max-height: 150pxoverflow: 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.

 

* Lưu ý nha các bạn: 

+ 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.

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.

Có thể bạn quan tâm: Shortcode hiển thị sản phẩm tùy chỉnh

Bảng mã hệ màu cho những ai cần :))

MàuTên màuMã HEXMã RGB
 Black#000000rgb(0,0,0)
 White#FFFFFFrgb(255,255,255)
 Red#FF0000rgb(255,0,0)
 Lime#00FF00rgb(0,255,0)
 Blue#0000FFrgb(0,0,255)
 Yellow#FFFF00rgb(255,255,0)
 Cyan#00FFFFrgb(0,255,255)
 Magenta#FF00FFrgb(255,0,255)
 Silver#C0C0C0rgb(192,192,192)
 Gray#808080rgb(128,128,128)
 Maroon#800000rgb(128,0,0)
 Olive#808000rgb(128,128,0)
 Green#008000rgb(0,128,0)
 Purple#800080rgb(128,0,128)
 Teal#008080rgb(0,128,128)
 Navy#000080rgb(0,0,128)
 maroon#800000rgb(128,0,0)
 darkred#8B0000rgb(139,0,0)
 brown#A52A2Argb(165,42,42)
 firebrick#B22222rgb(178,34,34)
 crimson#DC143Crgb(220,20,60)
 red#FF0000rgb(255,0,0)
 tomato#FF6347rgb(255,99,71)
 coral#FF7F50rgb(255,127,80)
 indianred#CD5C5Crgb(205,92,92)
 lightcoral#F08080rgb(240,128,128)
 darksalmon#E9967Argb(233,150,122)
 salmon#FA8072rgb(250,128,114)
 lightsalmon#FFA07Argb(255,160,122)
 orangered#FF4500rgb(255,69,0)
 darkorange#FF8C00rgb(255,140,0)
 orange#FFA500rgb(255,165,0)
 gold#FFD700rgb(255,215,0)
 darkgoldenrod#B8860Brgb(184,134,11)
 goldenrod#DAA520rgb(218,165,32)
 palegoldenrod#EEE8AArgb(238,232,170)
 darkkhaki#BDB76Brgb(189,183,107)
 khaki#F0E68Crgb(240,230,140)
 olive#808000rgb(128,128,0)
 yellow#FFFF00rgb(255,255,0)
 yellowgreen#9ACD32rgb(154,205,50)
 darkolivegreen#556B2Frgb(85,107,47)
 olivedrab#6B8E23rgb(107,142,35)
 lawngreen#7CFC00rgb(124,252,0)
 chartreuse#7FFF00rgb(127,255,0)
 greenyellow#ADFF2Frgb(173,255,47)
 darkgreen#006400rgb(0,100,0)
 green#008000rgb(0,128,0)
 forestgreen#228B22rgb(34,139,34)
 lime#00FF00rgb(0,255,0)
 limegreen#32CD32rgb(50,205,50)
 lightgreen#90EE90rgb(144,238,144)
 palegreen#98FB98rgb(152,251,152)
 darkseagreen#8FBC8Frgb(143,188,143)
 mediumspringgreen#00FA9Argb(0,250,154)
 springgreen#00FF7Frgb(0,255,127)
 seagreen#2E8B57rgb(46,139,87)
 mediumaquamarine#66CDAArgb(102,205,170)
 mediumseagreen#3CB371rgb(60,179,113)
 lightseagreen#20B2AArgb(32,178,170)
 darkslategray#2F4F4Frgb(47,79,79)
 teal#008080rgb(0,128,128)
 darkcyan#008B8Brgb(0,139,139)
 aqua#00FFFFrgb(0,255,255)
 cyan#00FFFFrgb(0,255,255)
 lightcyan#E0FFFFrgb(224,255,255)
 darkturquoise#00CED1rgb(0,206,209)
 turquoise#40E0D0rgb(64,224,208)
 mediumturquoise#48D1CCrgb(72,209,204)
 paleturquoise#AFEEEErgb(175,238,238)
 aquamarine#7FFFD4rgb(127,255,212)
 powderblue#B0E0E6rgb(176,224,230)
 cadetblue#5F9EA0rgb(95,158,160)
 steelblue#4682B4rgb(70,130,180)
 cornflowerblue#6495EDrgb(100,149,237)
 deepskyblue#00BFFFrgb(0,191,255)
 dodgerblue#1E90FFrgb(30,144,255)
 lightblue#ADD8E6rgb(173,216,230)
 skyblue#87CEEBrgb(135,206,235)
 lightskyblue#87CEFArgb(135,206,250)
 midnightblue#191970rgb(25,25,112)
 navy#000080rgb(0,0,128)
 darkblue#00008Brgb(0,0,139)
 mediumblue#0000CDrgb(0,0,205)
 blue#0000FFrgb(0,0,255)
 royalblue#4169E1rgb(65,105,225)
 blueviolet#8A2BE2rgb(138,43,226)
 indigo#4B0082rgb(75,0,130)
 darkslateblue#483D8Brgb(72,61,139)
 slateblue#6A5ACDrgb(106,90,205)
 mediumslateblue#7B68EErgb(123,104,238)
 mediumpurple#9370DBrgb(147,112,219)
 darkmagenta#8B008Brgb(139,0,139)
 darkviolet#9400D3rgb(148,0,211)
 darkorchid#9932CCrgb(153,50,204)
 mediumorchid#BA55D3rgb(186,85,211)
 purple#800080rgb(128,0,128)
 thistle#D8BFD8rgb(216,191,216)
 plum#DDA0DDrgb(221,160,221)
 violet#EE82EErgb(238,130,238)
 fuchsia#FF00FFrgb(255,0,255)
 orchid#DA70D6rgb(218,112,214)
 mediumvioletred#C71585rgb(199,21,133)
 palevioletred#DB7093rgb(219,112,147)
 deeppink#FF1493rgb(255,20,147)
 hotpink#FF69B4rgb(255,105,180)
 lightpink#FFB6C1rgb(255,182,193)
 pink#FFC0CBrgb(255,192,203)
 antiquewhite#FAEBD7rgb(250,235,215)
 beige#F5F5DCrgb(245,245,220)
 bisque#FFE4C4rgb(255,228,196)
 blanchedalmond#FFEBCDrgb(255,235,205)
 wheat#F5DEB3rgb(245,222,179)
 cornsilk#FFF8DCrgb(255,248,220)
 lemonchiffon#FFFACDrgb(255,250,205)
 lightgoldenrodyellow#FAFAD2rgb(250,250,210)
 lightyellow#FFFFE0rgb(255,255,224)
 saddlebrown#8B4513rgb(139,69,19)
 sienna#A0522Drgb(160,82,45)
 chocolate#D2691Ergb(210,105,30)
 peru#CD853Frgb(205,133,63)
 sandybrown#F4A460rgb(244,164,96)
 burlywood#DEB887rgb(222,184,135)
 tan#D2B48Crgb(210,180,140)
 rosybrown#BC8F8Frgb(188,143,143)
 moccasin#FFE4B5rgb(255,228,181)
 navajowhite#FFDEADrgb(255,222,173)
 peachpuff#FFDAB9rgb(255,218,185)
 mistyrose#FFE4E1rgb(255,228,225)
 lavenderblush#FFF0F5rgb(255,240,245)
 linen#FAF0E6rgb(250,240,230)
 oldlace#FDF5E6rgb(253,245,230)
 papayawhip#FFEFD5rgb(255,239,213)
 seashell#FFF5EErgb(255,245,238)
 mintcream#F5FFFArgb(245,255,250)
 slategray#708090rgb(112,128,144)
 lightslategray#778899rgb(119,136,153)
 lightsteelblue#B0C4DErgb(176,196,222)
 lavender#E6E6FArgb(230,230,250)
 floralwhite#FFFAF0rgb(255,250,240)
 aliceblue#F0F8FFrgb(240,248,255)
 ghostwhite#F8F8FFrgb(248,248,255)
 honeydew#F0FFF0rgb(240,255,240)
 ivory#FFFFF0rgb(255,255,240)
 azure#F0FFFFrgb(240,255,255)
 snow#FFFAFArgb(255,250,250)
 black#000000rgb(0,0,0)
 dimgray#696969rgb(105,105,105)
 gray#808080rgb(128,128,128)
 darkgray#A9A9A9rgb(169,169,169)
 silver#C0C0C0rgb(192,192,192)
 lightgray#D3D3D3rgb(211,211,211)
 gainsboro#DCDCDCrgb(220,220,220)
 whitesmoke#F5F5F5rgb(245,245,245)
 white#FFFFFFrgb(255,255,255)
Xem chi tiết
THÔNG TIN THÊM

Quảng cáo

Nhận Mã Giảm Giá Hosting

Tư Vấn Dịch Vụ

Chào bạn! Bạn cần tư vấn hãy gửi tin nhắn nhé!