-1

In CSS it is allowed to write something like this.

#div-with-border {
  width: 100%;   // scales with parent wrapper
  height: 30%;   // scales with parent wrapper

  border: 1px solid black;
  border-radius: 10%;
}

If #div-width-border isn't a perfect square the border won't be a circle, since this means, that 10% of the width and 10% of the height are used for the border-radius (which differ). I would like to get perfect circles... I can't use px, since the border-radius depends on the height/width.

I'm sure that the width of #div-width-border is always greater than the height, of the element. I would need a border radius of the size 100% of element height to get a perfect circle, but just 100% won't do it, since it'll use the element width for one part of the radius calculation.

Rob
  • 14,746
  • 28
  • 47
  • 65
LastSecondsToLive
  • 744
  • 10
  • 24
  • Did you try `50%`? – jonrsharpe Jun 05 '16 at 12:53
  • @jonrsharpe I'm in a different situation here, since the div isn't a perfect square and I need percentages to make the border a circle independent of the divs width/height. – LastSecondsToLive Jun 05 '16 at 12:58
  • That is not the question you've written; please [edit]. – jonrsharpe Jun 05 '16 at 13:01
  • @jonrsharpe That's exactly, what I've written. "*I can't use `px`...*", "*If `#div-width-border` isn't a perfect square...*", etc. – LastSecondsToLive Jun 05 '16 at 13:07
  • It's not. You mention 10% and 100%, neither of which make any sense; most of your question is basically red herrings Try *"How can you crop a non-square div into a circle? I know you can use `border-radius: 50%;` if the div is a square, but mine is not. Also it varies with the size of its parent so I can't use an absolute px size."* – jonrsharpe Jun 05 '16 at 13:20
  • Well see you doesn't want to achieve perfect circle using height and width of same i.e. in square and then border-radius of 50%, but you could add padding into it and then add border-radius of 50%. – frnt Jun 05 '16 at 13:22
  • Oh and maybe throw in a stack snippet of your closest attempt, a [mcve] is often helpful. – jonrsharpe Jun 05 '16 at 13:25
  • Are you asking how to make each corner a perfect quarter-circle? – Alohci Jun 05 '16 at 13:28
  • If you get answer for your question,don't forget to post codes. – frnt Jun 05 '16 at 14:20

2 Answers2

5

If you know the ratio between the width and the height, you may use the Slash-Annotation to specify different %-values for horizontal and vertical border-radius. An Example is below:

.wrapper {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.div-with-border {
  width: 100%;
  height: 25%;
  background-color: blue;
  border: 1px solid black;
  border-radius: 10% / 40%;
}
<div class="wrapper">
  <div class="div-with-border"></div>
</div>
MattDiMu
  • 4,873
  • 1
  • 19
  • 29
0

Have you tried border-radius: 50%; ? Since you're saying that the div is a perfect square, setting border radius to 50% should work

hulkinBrain
  • 746
  • 8
  • 28
  • Sorry, of course I meant if the div *isn't* a perfect square. Edit.. – LastSecondsToLive Jun 05 '16 at 12:57
  • The info inside the div will get cropped since you want it to be circular. The div should be square in shape to convert it into a perfect circle. You should consider adding padding to avoid cropping or overflow of the contents of the div. Is it okay if your div has an overflow property? Otherwise the div will be oval in shape as the width is larger than the height. – hulkinBrain Jun 05 '16 at 13:11
  • @hulking I mean, that the border forms a perfect circle. Like [this](https://jsfiddle.net/pzxb170m/1/): of course the div isn't. – LastSecondsToLive Jun 05 '16 at 13:22
  • Yeah, thats ok, what i am saying is that, you need to have padding inside the div to reduce the width of the content so that the width matches the dimensions of the height to create a circular div. – hulkinBrain Jun 05 '16 at 13:26