Home / Articles / Programming languages / Markup languages / HTML & CSS / Creating circles and ovals using only CSS3 with cross-browser support

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

Creating circles and ovals using only CSS3 with cross-browser support
 
Creating circles and ovals using only CSS3 with cross-browser support
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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


 

Read also

CSS3: multiple backgrounds

CSS3: multiple backgrounds

CSS3: Progressive Internet Explorer (PIE)

CSS3: Progressive Internet Explorer (PIE)

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation