HTML CSS examples for CSS Widget:Border Style
Border after each row in CSS Grid
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- w w w . j ava 2 s . co m--> box-sizing: border-box; } .outer { width: 80%; margin: 0 auto; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: auto repeat(3, auto) max-content auto; } .wrapper>div:not(.line) { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper > div:first-of-type { grid-column: 2; } .line { grid-column: 1 / -1; height: 2px; border-bottom: 1px solid black; width: 100%; } .line + div { grid-column: 2; } </style> </head> <body> <div class="outer"> <div class="wrapper"> <div> 1111111 </div> <div> 222 </div> <div> 3333333333 </div> <div class="line"></div> <div> 4444 </div> <div> 555555555 </div> <div> asdfaf adf asdf asdf asdf asd fasd asd ads ad f </div> </div> </div> </body> </html>