Create two borders or box shadows around an image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Shadow

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Shadow

Description

Create two borders or box shadows around an image

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!-- w w  w .ja va 2s.com-->
   padding:51px;
}

.profile-userpic {
   position:relative;
   display:inline-block;
}

.profile-userpic:before,
.profile-userpic:after {
   z-index:2;
   content:"";
   position:absolute;
   display:block;
   width:100%;
   height:100%;
}

.profile-userpic:before {
   background-color:Chartreuse;
   top:-9px;
   left:-13px;
}

.profile-userpic:after {
   background-color:yellow;
   border:2px solid blue;
   bottom:-26px;
   right:-26px;
}

.profile-userpic img {
   z-index:3;
   position:relative;
}
</style> 
 </head> 
 <body> 
  <div class="profile-userpic"> 
   <img src="https://www.java2s.com/style/demo/Opera.png"> 
  </div>  
 </body>
</html>

Related Tutorials