andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Highlight key points in articles

Browse Source
This commit is contained in:
Angelos Chalaris
2022-11-05 16:04:35 +02:00
parent 07f0701a85
commit bbbf725119
37 changed files with 89 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blog_posts/css-nested-border-radius.md
View File

@ -1,7 +1,7 @@
---
title: "Tip: Perfect nested border radius in CSS"
shortTitle: Perfect nested border radius in CSS
type: story
type: tip
tags: css,visual
expertise: beginner
author: chalarangelo
@ -10,7 +10,7 @@ excerpt: Nesting elements with rounded borders can look very wrong if not done c
firstSeen: 2022-04-03T05:00:00-04:00
---
Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is calculate the border radius of one of the elements and the distance between them. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as `innerRadius + distance = outerRadius` or more tersely `R1 + D = R2`.
Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is **calculate the border radius of one of the elements and the distance between them**. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as `innerRadius + distance = outerRadius` or more tersely `R1 + D = R2`.
![Nested border radius formula](./blog_images/border-radius.png)