CSS-Doodle Course - Qtr Circles with Border Radius

CSS-Doodle Course - Qtr Circles with Border Radius
One CSS-Doodle pattern that is all over the web, so it must be popular, is a grid full of quarter circles. All the quarter circles in the grid can have the same color or each could have a random color. Also, these quarter circles have only one curved side and the other sides are straight edges. Think of a pie that has been sliced in to fourths. The fun happens when we use CSS-Doodle to randomly draw the quarter circles in to the grid, as we can get some interesting patterns.

CSS Border-Radius

How 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 Syntax

There 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;

Further Reading

Creating Code Art with CSS-Doodle - Tutorial Series Index

CSS-Doodle Copyright (c) Yuan Chuan. Licensed under the MIT License. CSS-Doodle Documentation.
Screenshots used by permission. Processing (Java), p5.js (JavaScript) and Processing.py (Python) are software projects created by the Processing Foundation.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

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.