HTML CSS examples for CSS Widget:Border Style
Removing border from first-child
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .grid {<!--from w w w .j ava2 s .co m--> display: block; float: left; border:1px solid #000; } .grid ul { list-style: none; margin: 0; padding: 0; text-align:justify; } .grid ul:after { content: ''; width: 100%; display: inline-block; } .grid ul li { display: inline; } .grid-five { width: 18%; } .grid-item { display: inline-block; background: transparent; position: relative; overflow: hidden; } .grid ul li .grid-item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .grid-person-wrapper { border: 8px solid #cad7c5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; float: left; position: relative; z-index: 1; cursor: pointer; -webkit-transition: All 0.1s ease; -moz-transition: All 0.1s ease; -o-transition: All 0.1s ease; -ms-transition: All 0.1s ease; transition: All 0.1s ease; } .grid-person-wrapper:hover { border: 8px solid #a9f001; opacity: 0.8; } .grid-person-mug { width: 100%; border: none; max-width: 100%; } </style> </head> <body> <div class="grid"> <ul> <li> <div class="grid-item grid-five"> <div class="grid-person-wrapper"> <img class="grid-person-mug" src="https://www.java2s.com/style/demo/Opera.png"> </div> </div> </li> <li> <div class="grid-item grid-five"> <div class="grid-person-wrapper"> <img class="grid-person-mug" src="https://www.java2s.com/style/demo/Opera.png"> </div> </div> </li> <li> <div class="grid-item grid-five"> <div class="grid-person-wrapper"> <img class="grid-person-mug" src="https://www.java2s.com/style/demo/Firefox.png"> </div> </div> </li> <li> <div class="grid-item grid-five"> <div class="grid-person-wrapper"> <img class="grid-person-mug" src="https://www.java2s.com/style/demo/Safari.png"> </div> </div> </li> <li> <div class="grid-item grid-five"> <div class="grid-person-wrapper"> <img class="grid-person-mug" src="https://www.java2s.com/style/demo/Safari.png"> </div> </div> </li> </ul> </div> </body> </html>