How to Create Circular Divs in CSS with Ease?

Simplified Circular Div Creation in CSS

Conventional methods for creating circular divs often involve generating images of different sizes, which can be time-consuming and inefficient. However, CSS offers a more convenient solution.

To create circular divs using CSS, simply apply the following steps:

• CSS:

Define a base class for all circular divs with a rounded border:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* for IE8 support */
}

• HTML:

Create HTML elements using the base class and specify the desired dimensions and styling within custom classes:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Example:

Consider the following sample code and its output:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc);
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

<div class="circleBase type1"></div>

<div class="circleBase type2"></div>
<div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Output:

Note: Internet Explorer 8 and below require CSS3 PIE for this technique to work properly.

The above is the detailed content of How to Create Circular Divs in CSS with Ease?. For more information, please follow other related articles on the PHP Chinese website!