CSS3 Circles: How to Create Circles Using CSS3 Border-Radius
Creating circles and rounded shapes was a major challenge in CSS before border-radius came along. In the past, web designers had to use images or complex scripts to achieve circular shapes. However, with the advent of CSS3, creating circles became much simpler thanks to the border-radius property.
The border-radius property allows you to define how round the corners of an element should be. You can create perfect circles or ellipses by setting equal values for all four corners. This makes creating circular user interface elements such as avatars, icons, buttons, and more easy without the need for images.
Basic Syntax
The border-radius property can be specified with one, two, three, or four values. Here's the basic syntax:
border-radius: radius;
- Using one value sets the radius for all four corners
- Using two values sets the horizontal and vertical radius, respectively
- Using three values sets the horizontal radius for the top-left and bottom-right, the vertical radius for the top-right and bottom-left, and the trailing radius for the remaining corners
- Using four values sets the radius for the top-left, top-right, bottom-right, and bottom-left corners respectively
You can use lengths (px, em, rem) or percentages to specify the radius. Let's look at some examples.
Creating a Circular Div
To create a circular div, you can set equal horizontal and vertical radius values:
div {
width: 100px;
height: 100px;
background: tomato;
border-radius: 50%;
}
Here, we set the border radius to 50%, which makes the corners perfectly round, creating a circle since the width and height are also equal.
Semi-Circles and Quarter Circles
You can create semi-circles and quarter circles by combining border-radius with specific width and height values:
/* Semi-circle */
div {
width: 100px;
height: 50px;
background: gold;
border-radius: 50px 50px 0 0;
}
/* Quarter-circle */
div {
width: 50px;
height: 50px;
background: rebeccapurple;
border-radius: 100% 0 0 0;
}
In the semi-circle example, we set the top horizontal radius to 50px (half the width) while keeping the bottom radius at 0. For the quarter-circle, we use 100% for the top-left radius and 0 for the others.
Creating Circular Images and Icons
One of the most common use cases for CSS circles is creating circular avatars, images, and icons. You can easily turn a square image into a circle:
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
This will make any image with a width and height of 200px appear as a perfect circle.
Circular Buttons
Circular buttons are a popular design trend, and with border-radius, they're easy to create:
button {
width: 75px;
height: 75px;
border: none;
background: #333;
color: white;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
}
Here, we've created a circular button with a diameter of 75px. You can adjust the size, colors, and other styles as needed.
Responsive Circles
To create responsive circles that scale well on different screen sizes, you can use viewport units like vw and vh instead of fixed lengths:
div {
width: 20vw;
height: 20vw;
background: palevioletred;
border-radius: 50%;
}
This will create a circle with a diameter that's 20% of the viewport width, ensuring it scales proportionally on different devices.
Combining with Other Properties
You can combine border-radius with other CSS properties like box-shadow, text-shadow, and transforms to create more complex and visually appealing effects:
div {
width: 150px;
height: 150px;
background: #f9c74f;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(45deg);
}
This example creates a rotated circle with a drop shadow, achieving a 3D-like effect.
Subtle Rounded Corners
While circles are a common use case, border-radius can also be used to create subtle rounded corners on elements like cards, modals, and containers:
.card {
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
Here, we've added an 8px border-radius to create a slightly rounded card element.
Browser Support
The border-radius property has excellent browser support, working in all modern browsers as well as Internet Explorer 9 and above. For older browser versions, you may need to use vendor prefixes like -webkit-border-radius and -moz-border-radius.
FAQs
Can I create only half a circle using border-radius?
Yes, you can create a semi-circle or quarter-circle by setting different radius values for each corner. For example, to create a semi-circle, you can set the top horizontal radius to 50% (or half the width) while keeping the bottom radius at 0.
How do I create a circle with an image inside?
To create a circle with an image inside, you'll need to apply the border-radius property to the container element (e.g., a div) and set the image as the background. Here's an example:
.circle-image {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: url('path/to/image.jpg');
background-size: cover;
}
Can I animate the border-radius property?
Yes, you can animate the border-radius property using CSS transitions or keyframe animations. This allows you to create interesting effects like pulsating or morphing circles.
How do I create a circle with a border?
To create a circle with a border, you'll need to set the border property on the same element where you've applied border-radius. Here's an example:
div {
width: 100px;
height: 100px;
background: white;
border: 5px solid black;
border-radius: 50%;
}
This will create a circle with a 5px solid black border.
Can I use border-radius on inline elements like spans or anchors?
Yes, you can use border-radius on inline elements, but you'll need to set the display property to inline-block or block first. Inline elements don't have a defined width and height by default, so border-radius won't work unless you change the display.