<h2 id="heading-border-radius">Border-Radius</h2>
<ol>
<li>When you specify a percentage value for <code>border-radius</code> in CSS, it is indeed relative to the width and height of the element's bounding box.
</li>
<li>The <code>border-radius</code> property does not inherit the dimensions from the parent element. Instead, it uses the width and height of the element itself to calculate the rounded corner radius. The percentage value represents a proportion of the element's own width or height.
</li>
</ol>
For example, consider the following CSS code:
<pre><code class="lang-css">.rounded-element {
 width: 200px;
 height: 100px;
 background-color: red;
 border-radius: 50%;
}
</code></pre>
<ol>
<li>In this example, the <code>border-radius: 50%</code> means that the corner radius will be half of the element's own width and height. The percentage value is calculated based on the element itself, not the parent.</li>
</ol>

## Border-Radius

1. When you specify a percentage value for `border-radius` in CSS, it is indeed relative to the ***width*** and ***height*** of the element's bounding box.
    
2. The `border-radius` property does not inherit the dimensions from the parent element. Instead, it uses the width and height of the element itself to calculate the rounded corner radius. The percentage value represents a proportion of the element's ***own*** ***width*** or ***height***.
    

For example, consider the following CSS code:

```css
.rounded-element {
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}
```

1. In this example, the `border-radius: 50%` means that the corner radius will be half of the element's own width and height. The percentage value is calculated based on the element itself, not the parent.

Border-Radius

Table of contents

Border-Radius