From 2dbc7002beee11d771473d47c3f8018ee50bf0d4 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Mon, 14 Mar 2022 10:01:14 +0200 Subject: [PATCH] Add CSS nested border radius --- blog_images/border-radius.png | Bin 0 -> 13788 bytes blog_posts/css-nested-border-radius.md | 27 +++++++++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 blog_images/border-radius.png create mode 100644 blog_posts/css-nested-border-radius.md diff --git a/blog_images/border-radius.png b/blog_images/border-radius.png new file mode 100644 index 0000000000000000000000000000000000000000..5cb83be8fe6394417046431c15966eca973be0c0 GIT binary patch literal 13788 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 literal 0 HcmV?d00001 diff --git a/blog_posts/css-nested-border-radius.md b/blog_posts/css-nested-border-radius.md new file mode 100644 index 000000000..716766db3 --- /dev/null +++ b/blog_posts/css-nested-border-radius.md @@ -0,0 +1,27 @@ +--- +title: "Tip: Perfect nested border radius in CSS" +type: story +tags: css,visual +expertise: beginner +author: chalarangelo +cover: blog_images/rocky-beach-waves.jpg +excerpt: Nesting elements with rounded borders can look very wrong if not done correctly. Here's a quick tip on how to do it right. +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`. + +![Nested border radius formula](./blog_images/border-radius.png) + +Let's take a look at a simple CSS example. Say we want to style two nested boxes with rounded borders. The outer box has a `border-radius` of `24px` and a `padding` of `8px`. Using the previous formula, we can deduce that the inner box should have a `border-radius` of `16px`. + +```css +.outer { + border-radius: 24px; + padding: 8px; +} + +.inner { + border-radius: 16px; +} +```