Absolute positioned image in border radius wrapper - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Absolute positioned image in border radius wrapper

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
#wrapper {<!--from www .j  a  va2  s  .  c om-->
   position: relative;
}
#inner {
   margin: 2px; /* Make room for the border */
   width: 200px;
   height: 200px;
   position: relative;
}
#border {
   -webkit-border-radius: 5px;
   border: 2px solid black;
   width: 200px;
   height: 200px;
   position: absolute;
   top: 0;
   left: 0;
}
#i {
   position: absolute;
   top: 0;
   right: 0;
}

      </style> 
   </head> 
   <body> 
      <div id="wrapper"> 
         <div id="inner"> 
            <img id="i" width="75" height="75" src="https://www.java2s.com/style/demo/Opera.png" alt="alt message"> 
         </div> 
         <div id="border"></div> 
      </div>  
   </body>
</html>

Related Tutorials