style div with an inner border inside a circle div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Shape

Description

style div with an inner border inside a circle div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style media="screen">

.container {<!--   w ww  .ja  v  a  2s  .  c  om-->
   max-width: 980px;
   height: auto;
   margin: 0 auto;
   width: 100%;
}

.border {
   background: white;
   border-radius: 50%;
   height: 300px;
   width: 300px;
   position: relative;
}

.innerborder {
   border-style: dashed;
   height: 200px;
   border-radius: 50%;
   width: 200px;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}


      </style> 
 </head> 
 <body style="background: black;"> 
  <div class="container"> 
   <div class="border"> 
    <div class="innerborder"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials