CSS-Doodle Course - Qtr Circles with Border Radius
CSS Border-RadiusHow do we turn a square in to a quarter circle? We do this with the CSS border-radius property. But before we dig in to creating patterns with quarter circles in CSS-Doodle, let's take a quick look at the CSS border-radius property and how it works on a webpage. Don't panic, we won't be going into the syntax to deeply. But if you wish to learn more about the syntax and how this CSS property works, use the link at the bottom.
With this CSS border-radius property, we can set the radius, or roundness, for each of the four corners of a square. Each corner can have a different radius or some corners can have the same radius.
The CSS Code SyntaxThere are two values that we can use for the corner radius, which are length (such as pixels) and percentages. We will be using percentages in this tutorial. There are also several shorthand syntax that we can use to make our code easier to read. We will be using only one shorthand syntax, which has four values - one for each corner. Let's look at an example. The code below will set the radius to 10% on all four corners (see screenshot).
border-radius: 10% 10% 10% 10%;
<div style="border-radius: 10% 10% 10% 10%;"></div>
Now let's set each corner of a square with a different percentage value. As you can see, the percentages are listed in sequence. The first value (10%) is for the top left corner. Next, we have the percentage for the top right corner (20%). The third percentage (30%) is for the bottom right corner and the 40% is for the bottom left corner (see screenshot).
border-radius: 10% 20% 30% 40%;
<div style="border-radius: 10% 20% 30% 40%;"></div>
So far, the squares still look like rounded rectangles, which is what they are called in Affinity Designer and other design software. But we want a quarter circle. How will we do this? Let's try setting the top left corner to 100% and the other three corners to zero (see screenshot).
border-radius: 100% 0 0 0;
<div style="border-radius: 100% 0 0 0;"></div>
Now that we know how to create a quarter circle, we can draw all four quarter circles by changing which corner has the 100% radius (see screenshot).
In the next tutorial, let's go back to our CSS-Doodle project and use what we have learned to create a pattern of quarter circles (see screenshot).
border-radius: 100% 0 0 0;
Creating Code Art with CSS-Doodle - Tutorial Series Index
Editor's Picks Articles
Top Ten Articles
Content copyright © 2021 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.