CODEWITHSUNDEEP
htmlcss
user4873951
user4873951

Reputation:

How to style div with an inner border inside a div?

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.

Upvotes: 0

Views: 4852

Answers (7)

Suresh Karia
Suresh Karia

Reputation: 18218

Here is the code you're looking for

body{
  background:#000;
}

.outer{
  height:200px;
  width:200px;
  border-radius:50%;
  background:#fff;
  margin:35px auto;
  padding:10px;
}

.inner{
  height:100%;
  width:100%;
  border-radius:50%;
  border:1px dashed #b8b8b8;
}
<div class="outer">
  <div class="inner"></div>
</div>

Upvotes: 0

frnt
frnt

Reputation: 8795

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>

Upvotes: 2

Bango
Bango

Reputation: 1001

Here is a working example. I constrain the dimensions of both divs, and give them margin: 0 auto to center them in their container. I made the inner div 20px smaller both lengthwise and heightwise.

box-sizing: border-box;

That bit will make it so that your border isn't actually adding any width or height to your div, which allows us to use a simple

position: relative;
top: 10px;

To drop the inner div down 10 pixels (or half of the height difference between the 2 divs). The hotizontal alignment with margin: 0 auto takes care of centering the divs horizontally, and the result is a neat looking circle within a circle.

Upvotes: 1

karan3112
karan3112

Reputation: 1867

  • The circle div has to be a square.
  • Have placed the inner border div as absolute to the parent circle `div'.
  • You can also use pseudo elements to achieve this using before or after.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style media="screen">
.container{    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>
  <body style="background: black;">

        <div class="container">
          <div class="border">
            <div class="innerborder">
            </div>
          </div>

        </div>
  </body>
</html>

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7079

Easiest approach would be using box-shadow property.

  1. Draw your circle
  2. Give it your border
  3. Give it box-shadow of white color.

body {
  background: #000;
}

.container {
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.border {
  background: white;
  border-radius: 50%;
  width: 270px;
  height: 270px;
  margin: 30px auto;
  border: 2px dashed #000;
  box-shadow: 0 0 0 15px #fff;
}
<div class="container">
  <div class="border">
  </div>

</div>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Something like this,

Used box-sizing:border-box and width:100% and height:100% for inner div

*{
  box-sizing:border-box;
}
.container {
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.border {
  background: white;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  padding:5px;
  margin: 0 auto;
}


.innerborder {
  border-style: dashed;
  height: 100%;
  width:100%;
  border-radius: 50%;
}
<body style="background: black;">
  <div class="container">
    <div class="border">
      <div class="innerborder">
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Zeus
Zeus

Reputation: 1275

You can do it with absolute positioning. Like this :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style media="screen">
  .container {
    max-width: 980px;
    height: auto;
    margin: 0 auto;
    width: 100%;
  }
  
  .border {
    background: white;
    border-radius: 50%;
    height: 300px;
    position: relative;
  }
  
  .border:before {
    position: absolute;
    content: '';   
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border: 2px solid #555;
    border-style: dashed;
    border-radius:50%;
  }
</style>

<body style="background: black;">

  <div class="container">
    <div class="border">
    </div>

  </div>
</body>

</html>

Upvotes: 1

Related Questions