Creating circles and ovals using only CSS3 with cross-browser support

CSS3 still surprises with a bunch of new features. Making circles and ovals has never been easier before. It can be done by one simple CSS property with appropriate value.

Here is the CSS property with the value which makes elements look like circles or ovals:

border-radius: 50%;

For example if you want to make an element look like a circle its height and width must be equal. If height and width of the element are not equal, you will get an oval.

The example below contains three images with different aspect ratios: portrait, landscape, square and to all of them the following styles are applied:

img {
  border-radius: 50%;
}

Live demo

The same styles can be applied to div elements, but this time the width and height must be specified for all div elements, because without content the width and height are equal to zero, and such elements won't be displayed. Also the background must be specified with some color to make it visible, because by default all elements have transparent background.

div {
  border-radius: 50%;
  background-color: red;
  height: 200px;
  width: 200px;
}

Live demo

For cross-browser support the existing styles must be supplemented with different vendor prefixes of border-radius CSS property and PIE. Vendor prefixes add support for older versions of browsers such as Safari, Chrome, Firefox and others. PIE adds support for IE7 and IE8, and before it starts working the PIE must be added to a website as described in the following article: CSS3: Progressive Internet Explorer (PIE).

Here are final styles with cross-browser support:

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
behavior: url(PIE.htc);

Let's check how they work with div elements:

div {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -khtml-border-radius: 50%;
  border-radius: 50%;
  background-color: red;
  width: 200px;
  height: 200px;
  position: relative;
  behavior: url(PIE.htc);
}

Live demo