Dowemo
0 0 0 0


Question:

How do you position an inner border so that it looks like this.

enter image description here

My inner border div contains a border-style: dashed;

.container {
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}
.border {
  background: white;
  border-radius: 50%;
  height: 300px;
}
.innerborder {
  border-style: dashed;
  height: 200px;
  border-radius: 50%;
}
<body style="background: black;">
  <div class="container">
    <div class="border">
      <div class="innerborder">
      </div>
    </div>
  </div>
</body>

The css that I tried doesn't seem to produce an output that is related to the picture. Is there any other way to achieve this using css? Please help.


Best Answer:


I will suggest you to make use of pseudo selector :before and create dashed border inside .container, as below,

body{
  background:#111;
}
.container{
  width:400px;
  height:400px;
  border-radius:50%;
  background:#fff;
  margin:auto;
  position:relative;
}
.container:before{
  content:"";
  width:380px;
  height:380px;
  position:absolute;
  border:1px dashed #111;
  border-radius:50%;
  top:9px;
  left:9px;
}
<div class="container">
</div>

Even your code works fine, just add padding to .border and reduce the height of .inner-border, I have changed height of .container to 400px to get it into proper circle.

.container {
  height: 400px;
  margin: 0 auto;
  width: 400px;
}
.border {
  background: white;
  border-radius: 50%;
  height: 365px;
  width:380px;
  padding:10px;
}
.innerborder {
  border-style: dashed;
  height: 360px;
  border-radius: 50%;
}
<body style="background: black;">
  <div class="container">
    <div class="border">
      <div class="innerborder">
      </div>
    </div>
  </div>




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs