HTML and CSS Fluid Circle

Question

I am trying to create a fluid circle using HTML and CSS. I am almost done but as it should be fluid and content inside is dynamic, it's changing its shape from circle to oval and others.

body {
  position: relative;
}
.notify {
  position: absolute;
  top: 100%;
  left: 20%;
  background: red;
  border: 2px solid white;
  border-radius: 50%;
  text-align: center;
}
.notify > div {
  padding: 20px;
}

<div class="notify">
  <div>
    12
  </div>
</div>

Can you help me please?

Answer 1

The border-radius:50% hack which you're using makes the assumption that the <div> is square prior to the rounded corners being applied, otherwise it will produce an oval rather than a circle, exactly as you've noted.

Therefore, if you want the circle to remain circular as the content expands, you need to dynamically adjust the height to match the width. You'd probably need to use Javascript to achieve this.

Also, please note that border-radius is not supported in older versions of IE, so users with IE6, IE7 or IE8 won't see your circle at all. (though there is a hack for it called CSS3Pie)

Of course, adjusting the height will have the side effect of making the element take up more space vertically. This may not be what you want; you may want the the circle to be the same size regardless of what content is in it? In this case, you should fix the height and width of the circle, and give the content position:absolute; to prevent it from affecting the size of its parent.

An alternative to using the border-radius hack to produce a circle would be to use SVG. SVG is a vector graphics format which is embedded into most browsers.

Again, the notable exception is IE8 and earlier, but IE supports an alternative format called VML. Various scripts exist which can convert between SVG and VML, so you can produce a cross-browser solution with SVG plus Javascript.

If we're going to accept the Javascript is part of the solution, you could simply use a javascript library to draw it in the first place. My suggestion for this would be Raphael, which generates SVG or VML graphics according to the browser it's running it.

Hope that helps.

Answer 2

You need to set both width and height to the maximum of these both, in order to render a square, that with 50% radius corners, results into a circle.

You can do this in jQuery:

$(function() {
  var $elem = $(".notify > div");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

Try to change content (both in width and height) here