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àu Tên màu Mã HEX Mã RGB
  Black #000000 rgb(0,0,0)
  White #FFFFFF rgb(255,255,255)
  Red #FF0000 rgb(255,0,0)
  Lime #00FF00 rgb(0,255,0)
  Blue #0000FF rgb(0,0,255)
  Yellow #FFFF00 rgb(255,255,0)
  Cyan #00FFFF rgb(0,255,255)
  Magenta #FF00FF rgb(255,0,255)
  Silver #C0C0C0 rgb(192,192,192)
  Gray #808080 rgb(128,128,128)
  Maroon #800000 rgb(128,0,0)
  Olive #808000 rgb(128,128,0)
  Green #008000 rgb(0,128,0)
  Purple #800080 rgb(128,0,128)
  Teal #008080 rgb(0,128,128)
  Navy #000080 rgb(0,0,128)
  maroon #800000 rgb(128,0,0)
  darkred #8B0000 rgb(139,0,0)
  brown #A52A2A rgb(165,42,42)
  firebrick #B22222 rgb(178,34,34)
  crimson #DC143C rgb(220,20,60)
  red #FF0000 rgb(255,0,0)
  tomato #FF6347 rgb(255,99,71)
  coral #FF7F50 rgb(255,127,80)
  indianred #CD5C5C rgb(205,92,92)
  lightcoral #F08080 rgb(240,128,128)
  darksalmon #E9967A rgb(233,150,122)
  salmon #FA8072 rgb(250,128,114)
  lightsalmon #FFA07A rgb(255,160,122)
  orangered #FF4500 rgb(255,69,0)
  darkorange #FF8C00 rgb(255,140,0)
  orange #FFA500 rgb(255,165,0)
  gold #FFD700 rgb(255,215,0)
  darkgoldenrod #B8860B rgb(184,134,11)
  goldenrod #DAA520 rgb(218,165,32)
  palegoldenrod #EEE8AA rgb(238,232,170)
  darkkhaki #BDB76B rgb(189,183,107)
  khaki #F0E68C rgb(240,230,140)
  olive #808000 rgb(128,128,0)
  yellow #FFFF00 rgb(255,255,0)
  yellowgreen #9ACD32 rgb(154,205,50)
  darkolivegreen #556B2F rgb(85,107,47)
  olivedrab #6B8E23 rgb(107,142,35)
  lawngreen #7CFC00 rgb(124,252,0)
  chartreuse #7FFF00 rgb(127,255,0)
  greenyellow #ADFF2F rgb(173,255,47)
  darkgreen #006400 rgb(0,100,0)
  green #008000 rgb(0,128,0)
  forestgreen #228B22 rgb(34,139,34)
  lime #00FF00 rgb(0,255,0)
  limegreen #32CD32 rgb(50,205,50)
  lightgreen #90EE90 rgb(144,238,144)
  palegreen #98FB98 rgb(152,251,152)
  darkseagreen #8FBC8F rgb(143,188,143)
  mediumspringgreen #00FA9A rgb(0,250,154)
  springgreen #00FF7F rgb(0,255,127)
  seagreen #2E8B57 rgb(46,139,87)
  mediumaquamarine #66CDAA rgb(102,205,170)
  mediumseagreen #3CB371 rgb(60,179,113)
  lightseagreen #20B2AA rgb(32,178,170)
  darkslategray #2F4F4F rgb(47,79,79)
  teal #008080 rgb(0,128,128)
  darkcyan #008B8B rgb(0,139,139)
  aqua #00FFFF rgb(0,255,255)
  cyan #00FFFF rgb(0,255,255)
  lightcyan #E0FFFF rgb(224,255,255)
  darkturquoise #00CED1 rgb(0,206,209)
  turquoise #40E0D0 rgb(64,224,208)
  mediumturquoise #48D1CC rgb(72,209,204)
  paleturquoise #AFEEEE rgb(175,238,238)
  aquamarine #7FFFD4 rgb(127,255,212)
  powderblue #B0E0E6 rgb(176,224,230)
  cadetblue #5F9EA0 rgb(95,158,160)
  steelblue #4682B4 rgb(70,130,180)
  cornflowerblue #6495ED rgb(100,149,237)
  deepskyblue #00BFFF rgb(0,191,255)
  dodgerblue #1E90FF rgb(30,144,255)
  lightblue #ADD8E6 rgb(173,216,230)
  skyblue #87CEEB rgb(135,206,235)
  lightskyblue #87CEFA rgb(135,206,250)
  midnightblue #191970 rgb(25,25,112)
  navy #000080 rgb(0,0,128)
  darkblue #00008B rgb(0,0,139)
  mediumblue #0000CD rgb(0,0,205)
  blue #0000FF rgb(0,0,255)
  royalblue #4169E1 rgb(65,105,225)
  blueviolet #8A2BE2 rgb(138,43,226)
  indigo #4B0082 rgb(75,0,130)
  darkslateblue #483D8B rgb(72,61,139)
  slateblue #6A5ACD rgb(106,90,205)
  mediumslateblue #7B68EE rgb(123,104,238)
  mediumpurple #9370DB rgb(147,112,219)
  darkmagenta #8B008B rgb(139,0,139)
  darkviolet #9400D3 rgb(148,0,211)
  darkorchid #9932CC rgb(153,50,204)
  mediumorchid #BA55D3 rgb(186,85,211)
  purple #800080 rgb(128,0,128)
  thistle #D8BFD8 rgb(216,191,216)
  plum #DDA0DD rgb(221,160,221)
  violet #EE82EE rgb(238,130,238)
  fuchsia #FF00FF rgb(255,0,255)
  orchid #DA70D6 rgb(218,112,214)
  mediumvioletred #C71585 rgb(199,21,133)
  palevioletred #DB7093 rgb(219,112,147)
  deeppink #FF1493 rgb(255,20,147)
  hotpink #FF69B4 rgb(255,105,180)
  lightpink #FFB6C1 rgb(255,182,193)
  pink #FFC0CB rgb(255,192,203)
  antiquewhite #FAEBD7 rgb(250,235,215)
  beige #F5F5DC rgb(245,245,220)
  bisque #FFE4C4 rgb(255,228,196)
  blanchedalmond #FFEBCD rgb(255,235,205)
  wheat #F5DEB3 rgb(245,222,179)
  cornsilk #FFF8DC rgb(255,248,220)
  lemonchiffon #FFFACD rgb(255,250,205)
  lightgoldenrodyellow #FAFAD2 rgb(250,250,210)
  lightyellow #FFFFE0 rgb(255,255,224)
  saddlebrown #8B4513 rgb(139,69,19)
  sienna #A0522D rgb(160,82,45)
  chocolate #D2691E rgb(210,105,30)
  peru #CD853F rgb(205,133,63)
  sandybrown #F4A460 rgb(244,164,96)
  burlywood #DEB887 rgb(222,184,135)
  tan #D2B48C rgb(210,180,140)
  rosybrown #BC8F8F rgb(188,143,143)
  moccasin #FFE4B5 rgb(255,228,181)
  navajowhite #FFDEAD rgb(255,222,173)
  peachpuff #FFDAB9 rgb(255,218,185)
  mistyrose #FFE4E1 rgb(255,228,225)
  lavenderblush #FFF0F5 rgb(255,240,245)
  linen #FAF0E6 rgb(250,240,230)
  oldlace #FDF5E6 rgb(253,245,230)
  papayawhip #FFEFD5 rgb(255,239,213)
  seashell #FFF5EE rgb(255,245,238)
  mintcream #F5FFFA rgb(245,255,250)
  slategray #708090 rgb(112,128,144)
  lightslategray #778899 rgb(119,136,153)
  lightsteelblue #B0C4DE rgb(176,196,222)
  lavender #E6E6FA rgb(230,230,250)
  floralwhite #FFFAF0 rgb(255,250,240)
  aliceblue #F0F8FF rgb(240,248,255)
  ghostwhite #F8F8FF rgb(248,248,255)
  honeydew #F0FFF0 rgb(240,255,240)
  ivory #FFFFF0 rgb(255,255,240)
  azure #F0FFFF rgb(240,255,255)
  snow #FFFAFA rgb(255,250,250)
  black #000000 rgb(0,0,0)
  dimgray #696969 rgb(105,105,105)
  gray #808080 rgb(128,128,128)
  darkgray #A9A9A9 rgb(169,169,169)
  silver #C0C0C0 rgb(192,192,192)
  lightgray #D3D3D3 rgb(211,211,211)
  gainsboro #DCDCDC rgb(220,220,220)
  whitesmoke #F5F5F5 rgb(245,245,245)
  white #FFFFFF rgb(255,255,255)
Xem chi tiết