How is CSS em measurement used for height or border-radius measured?

Question

I understand that the "em" measurement is a relative unit for font-size, relative to the font-size of the containing element if it's specified in an absolute unit like px, or to the default font-size in the browser.

But I'm trying to understand how using em as a measurement for the border-radius of a box element, like a div, works. I'm assuming it's related to how using em as a measurement for the width or height of a box works.

Is it still related to font-size? How, specifically, is it measured? The explanations for how border-radius is computed that I've been able to find all seem to be based on px units.

Answer 1

It seems like it's related to font-size. In the end it's still a unit of measurement, like px.

This example might give you a better idea on how it works.

Markup:

<div id="A"></div>
<div id="B"></div>
<div id="text-height"></div>
<p>Some text</p>

<div id="C"></div>
<div id="D"></div>

CSS:

p {
    line-height: 1em;
    background: grey;
    display: inline-block;
    position: relative;
    top: -4px;
}
#A {
    height: 4em;
    background: red;
    width: 1em;
    display: inline-block;
}
#B {
    height: 2em;
    background: blue;
    width: 1em;
    display: inline-block;
}
#text-height {
    height: 1em;
    background: green;
    width: 1em;
    display: inline-block;
}
#C, #D {
    height: 4em;
    width: 4em;
    display: inline-block;
}
#C {
    border-radius: 2em;
    background: red;
}
#D {
    border-radius: 1em;
    background: blue;
}

Image:

Answer 2

I tried this in the browser and it is still relative to the font-size property of the element. If the font-size is not defined, it inherits from the next parent that has a font-size, or the browser defaults (which is 16px usually; TIL).