CSS border on circle within circle

Take a look at this codepen to see the problem I’m having.


If you did the simon challenge how did you approach creating the look and feel? (Just describe your approach please. I don’t want to cut and paste any code. That’s why I haven’t looked at the example codepen either.)

1 Like


There are many different approaches you can take if you prefer the look and feel of the example code. While you don’t have to make it look the same as the original game, I think it’s good practice exactly because of the problem that you are having.

You can actually achieve the style of the example code with only five <div>'s without using pseudoelements*—you should probably consider doing that because it will make your code much cleaner and much easier to implement your logic later with JavaScript.

Below a hint—play around with the values for border-radius until you are happy with it (given your current code I assume that you will have no issues understanding it):

<!-- HTML -->
<div class="top-right-quarter"></div>
/* CSS */
.top-right-quarter {
  width: 100px;
  height: 100px;
  border-left: 10px solid royalBlue;
  border-bottom: 10px solid royalBlue;
  border-top: 20px solid royalBlue;
  border-right: 20px solid royalBlue;
  border-radius: 0 100% 0 0;

I hope that helps! Good luck. :slight_smile:

*If I’m not mistaken you can get the layout with only 2 <div>'s with pseudoelements, but it’s impractical in this case because you actually need four clickable areas.

1 Like

Thank you that did help though I think the path I eventually chose might be slightly different from what I think you are getting at. But five divs is definitely better than the tangled mess I had.

When I did it, I had a container with the four buttons in it, and I had a 100% radius and border on the container. For each of the buttons I added the specific radius. I think this is one of the most straightforward and obvious ways to code it.

Some very basic pseudo-code:



  border black
  border-radius 100%

  border-top-left-radius 100%

  border-top-right-radius 100%

Here is what it looks like: