CSS3 Circles: How to Create Circles Using CSS3 Border Radius

Udemy Editor

CSS, or Cascading Style Sheets, are a powerful way to add graphics and effects to your website that are efficient, effective and that make your site user friendly. The new elements available in CSS3 offer even more flexibility for creating great looking graphics. This tutorial will show you how to create CSS3 circles using the border element available in CSS3. The tutorial will also show you how to use gradient fill in your circles.

If you want to learn how to develop great looking websites using CSS3 and HTML5, then sign up for the HTML5 & CSS3 Site Design course today. This course is designed to teach you to build a website using HTML5 and CSS3. The course shows you how to set up a website from scratch and it includes various tips and tricks that will help you make your website more attractive and user friendly. It contains step-by-step lectures on how to format your pages and how to test your site before it goes live.

To create circles using CSS3, we will use the following steps:

1. Create 3 squares using the CSS element

2. Define a class called circle

3. Use the border radius to convert our squares into circles

4. Use the background element to add a gradient fill

Create 3 Squares Using CSS3

To create circles using CSS, we will start by creating three square elements. The elements are created by creating a basic CSS element for our page and then setting the size of the element and the background color for that element.

Here is the code to create 3 squares for our page:

<!DOCTYPE html>

<html>

<head>

<style>

#element1 {

width: 200px;

height: 200px;

background: green;

}

#element2 {

width: 125px;

height: 125px;

background: red;

}

#element3 {

width: 100px;

height: 100px;

background: blue;

position: relative;

}

</style>

</head>

<body>

<h2>Basic Squares</h2>

The above code creates three elements on the page. We use CSS to set the width, height and background color of each element. Once the elements are created, we add the elements to the page using the “div id” tag within the HTML code itself. The result of the above code looks like this:

Define a Class Called Circle

Now we need to define a class that we can apply to each square using the “div id” tag. The class will define the borders for each of the squares. To create a circle, the border needs to be set at 50%. By setting the border size at 50% the corners of each square are rounded and the square turns into a circle.

The code to create the circle class looks like this:

.circle {

border-radius: 50%;

display: inline-block;

margin-right: 20px;

}

Note that we are defining a class so the class begins with the “.” Instead of the “#”. To learn about the different elements available in CSS3, enroll in the CSS3 Fundamentals course from Udemy. This course will teach you how to control the appearance of your content within an HTML document. It includes lessons on the fundamentals of CSS. The course will teach you how to work with selectors, it explains the concepts of cascading and inheritance and it offers step by step lessons on working with colors.

Use the Class Selector to Convert Our Squares into Circles

Now that we have the class defined, we need to assign the class to each of our squares. We therefore need to add a “class” selector to the “div id” elements on our page. Take a look at the code below:

<!DOCTYPE html>

<html>

<head>

<style>

.circle {

border-radius: 50%;

display: inline-block;

margin-right: 20px;

}

#element1 {

width: 200px;

height: 200px;

background: green;

}

#element2 {

width: 125px;

height: 125px;

background: red;

}

#element3 {

width: 100px;

height: 100px;

background: blue;

position: relative;

}

</style>

</head>

<body>

<h2>Basic Circles</h2>

</body>

</html>

The result of the code looks like this:

Congratulations. You now have three circles on your webpage using CSS3 and the border element to create the circles. Now we will use the background element to add a gradient fill to our circles to make them look even more impressive.

To learn how to create interesting website designs using CSS, many students have found success with CSS Development (with CSS3!). This course offers over thirty lectures that will teach you how to use CSS selectors. It will show you how to integrate CSS into your web and mobile applications. It offers step-by-step lessons on how to style text and lists. It also includes lessons on how to use sprite sheets, how to create a drop down model and how to apply CSS to page layout.

Use the Background Element to Add a Gradient Fill

We will now add a gradient fill to our circles using the background element. Take a look at the following code:

<!DOCTYPE html>

<html>

<head>

<style>

.circle {

border-radius: 50%;

display: inline-block;

margin-right: 20px;

}

#element1 {

width: 200px;

height: 200px;

background: green;

background: -webkit-linear-gradient(red, blue);

background: -o-linear-gradient(red, blue);

background: -moz-linear-gradient(red, blue);

background: linear-gradient(red, blue);

}

#element2 {

width: 125px;

height: 125px;

background: green;

background: -webkit-linear-gradient(yellow, green);

background: -o-linear-gradient(yellow, green);

background: -moz-linear-gradient(yellow, green);

background: linear-gradient(yellow, green);

}

#element3 {

width: 100px;

height: 100px;

background: blue;

position: relative;

background: -webkit-linear-gradient(purple, pink);

background: -o-linear-gradient(purple, pink);

background: -moz-linear-gradient(purple, pink);

background: linear-gradient(purple, pink);

}

</style>

</head>

<body>

<h2>Basic Circles</h2>

</body>

</html>

The above code results in the following:

Add CSS3 Circles and Other Elements to Your Web Pages

As you can see from the above, adding circles and squares to your web pages using CSS elements couldn’t be easier. Sign up for The CSS and CSS3 Crash Course today and learn to harness the power of CSS in your web pages and applications. This course will have you applying CSS to your web projects in no time at all. The course includes over seventy eight lectures that will teach you what CSS and CSS3 are, and how to apply the basic techniques of CSS in your own applications. The course will teach you how to build your own website from start to finish so that you can build CSS websites easily and efficiently in the future.