From ca1577553de0fbc3904d1fd2862e562ec54561f9 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Mon, 20 Feb 2023 02:43:49 +0000 Subject: [PATCH] Post about CSS Outline and Border Radius --- src/_posts/outline-border-radius.md | 22 ++++++++++++++++++ .../posts/outline-with-border-radius.png | Bin 0 -> 6952 bytes 2 files changed, 22 insertions(+) create mode 100644 src/_posts/outline-border-radius.md create mode 100644 src/assets/images/posts/outline-with-border-radius.png diff --git a/src/_posts/outline-border-radius.md b/src/_posts/outline-border-radius.md new file mode 100644 index 0000000..3d5e72b --- /dev/null +++ b/src/_posts/outline-border-radius.md @@ -0,0 +1,22 @@ +--- +title: Border Radius on an Outline in CSS +tags: [webdev, css] +category: [css, webdev] +date: 2023-02-20 +excerpt: A little note about using border-radius with an outline. +layout: single +--- + +Yesterday I was fiddling with the site adding a button to [copy code blocks]({% post_url "copy-code-blocks" %}) to the clipboard. While I was doing that I figured I'd also add a border to both proper code blocks and to inline code blocks. Something to make them stand out a little more. + +Initially I considered using an `outline`, rather than `border`. So that it didn't take up pixels as the site uses `box-sizing: border-box`. However, I discovered that `outline` doesn't allow you to control the radius. There was no `outline-radius` like there is `border-radius`. + +After a bit of searching I came across [this](https://stackoverflow.com/questions/5394116/outline-radius) post, which has some solutions and workarounds. Someone noted that there was a Firefox only option: `-moz-outline-radius`. A later [answer](https://stackoverflow.com/a/66661654) noted that as of April 2021 in Firefox you could use `border-radius` but it was the only browser that supported it. + +So I dutifully tried it out, and yes it did work. + +![Screenshot of an outline around some code, with a border-radius applied](/assets/images/posts/outline-with-border-radius.png) + +But then I noticed that it was also working in Safari Technology Preview Release 163! Unfortunately Safari 16.3 (Desktop) doesn't support it. + +One possible bug I noticed while experimenting was that Safari TP would ignore the outline style `dashed` if `border-radius` was set. Safari TP would instead make the outline solid. \ No newline at end of file diff --git a/src/assets/images/posts/outline-with-border-radius.png b/src/assets/images/posts/outline-with-border-radius.png new file mode 100644 index 0000000000000000000000000000000000000000..f1b44879222272fa9503c90bb5ee2c01840cfb2d GIT binary patch literal 6952 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 literal 0 HcmV?d00001