I'm trying to turn this box into a circle. I forgot how to do it

I know it’s in here somewhere, I tried searching the forum but couldn’t find it, and I forgot to save it.

border-radius: 50%; doesn’t exactly do it.

Code:

<style type="text/css"> 

html {
  width: 100%;
  height: 100%;
}

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
 
 
}

.box {
  box-shadow: 
0 0 0 5px #38761d,
0 0 0 10px black,
0 0 0 15px #1155cc,
0 0 0 20px black,
0 0 0 25px #38761d,
0 0 0 30px black,
0 0 0 35px #1155cc,
0 0 0 40px black,
0 0 0 45px #38761d,
0 0 0 50px black,
0 0 0 55px #1155cc,
0 0 0 60px black,
0 0 0 65px #38761d,
0 0 0 70px black,
0 0 0 75px #1155cc,
0 0 0 80px black,
0 0 0 85px #38761d;
}


</style>

</head>
<body>


<div class="box"></div>

That is because has no size. 50% of 0 is 0, so you effectively have border-radius: 0
It’s an empty element, no content means no size and no height or width has been defined either.

I believe you are thinking of this thread:

Can someone show me how to make this in either html or css please - #21 by ronpat

2 Likes

Thank you, I was looking for that one.

I just did it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.