border-radius circle css

stackoverflow.com › questions › 32199369 › border-radius-circle

You can do this by giving the span a fixed width and height:

span p {
    margin: 0;
}

span {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
}

<span>
    <p>25</p>
    <p>08</p>
</span>

Answer from GolezTrol on Stack Overflow

Stack Overflow

stackoverflow.com › questions › 32199369 › border-radius-circle

html - Border radius circle - Stack Overflow

Top answer

1 of 6

43

You can do this by giving the span a fixed width and height:

span p {
    margin: 0;
}

span {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
}

<span>
    <p>25</p>
    <p>08</p>
</span>

2 of 6

5

You need a predefined width and height on the span to be able to make it round.

span p {
    margin: 0;
}

span {
    background-color: red;
    display: inline-block;
    border-radius: 50%;
    width:40px;
    height:40px;
    padding-left:10px;
    box-sizing: border-box;
}

<span>
    <p>25</p>
    <p>08</p>
</span>

UnusedCSS

unused-css.com › blog › css-half-circle

CSS Half Circle | UnusedCSS

May 17, 2022 - What we need to do, alongside reducing the height to half, is to have a radius only for top corners. ... div { margin: 1rem auto; background-color: #48abe0; } .semi-circle { width: 20rem; height: 10rem; background-color: #48abe0; border-radius: 10rem 10rem 0 0; }

Discussions

Using Border-Radius to Create Circle Behind Text - HTML & CSS - SitePoint Forums | Web Development & Design Community

I’m trying to add a circle behind some slider text but I cannot get the circle to be centered with the text. You can see it here–scroll down to ‘Find Your Industry’. I’m using: .tp-parallax-wrap { background: red none repeat scroll 0 0; border-radius: 50%; height: 250px; width: 250px; ... More on sitepoint.com

sitepoint.com

1

February 22, 2016

Border-radius % or px?

There is a difference between using percentage and pixel values. Example: http://jsfiddle.net/95anjwdb/ If the height and the width are equal, you don't see any difference. But if one side is larger, the border-radius: 50%; will act differently. In that case, 50% means "50% of that side". So the corner will actually be an ellipse. If you use 10000px, it will remain a circle. The very high value doesn't change anything because the maximum radius will always be half of the height (or of the smaller side) for some reason. In my example, a radius of 15px would be enough (because the div is 30px high). But if I applied the same border-radius to higher divs, I wouldn't want to update the value constantly. So I guess people use border-radius: 10000px as default. As long as it works... More on reddit.com

r/css

14

12

November 26, 2014

[css-borders] `border-radius` with a circular edge

Is there, or could there be a more semantic way to describe a border radius as being round rather than some current conventions? From TailwindCSS: .rounded-full { border-radius: 9999px; } From an a... More on github.com

github.com

26

July 21, 2021

Can someone explain border-radius?

Imagine you have a cardboard box, and you have a ping pong ball. Let's say the radius of the ping pong ball is 1 inch. Take the ping pong ball and shove it into the corner of the cardboard box until it's nestled in there nice and snug. Since the ping pong ball is round, it's not a perfect fit into the square corners. There's a little bit of space left in between the ball and the edges of the box. Imagine you took a knife and carved away that extra space until the box fit perfectly around the ping pong ball. Or just collapsed the cardboard around the ball. The resulting shape is a box with a border radius of 1 inch. A larger border radius means a larger ball (or circle) that defines the area to be carved away, which means a more gradual curve. As for the reason why 100px can look the same as 10px: There's a point at which the ball you're trying to fit into the corner becomes larger than the box itself, so increasing the border radius no longer changes the shape of the corners. In the simplest case, assuming we have a perfectly square box, this happens when the diameter of the ball equals the length of any side. Since diameter is twice the radius, increasing border radius stops "working" once the radius increases beyond 1/2 the length of each side. More on reddit.com

r/Frontend

7

3

December 24, 2021

Videos

05:50

YouTube

How to create a circle using HTML & CSS? - YouTube

January 7, 2025

351