diff --git a/src/_posts/outline-border-radius.md b/src/_posts/outline-border-radius.md index 3d5e72b..6844a73 100644 --- a/src/_posts/outline-border-radius.md +++ b/src/_posts/outline-border-radius.md @@ -19,4 +19,27 @@ So I dutifully tried it out, and yes it did work. 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 +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. + +Codepen with example: + +

+ See the Pen + Untitled by Robert McGovern (@tarasis) + on CodePen. +

+ + +The results, as you can see below, are rather different between Safari TP v163, Chrome 110.0.5481.100, and Firefox Developer Edition 111.0b3 (64-bit) + +**Safari TP v163** + +![](/assets/images/posts/safaritp-codepen.png) + +**Chrome 110.0.5481** + +![](/assets/images/posts/chrome-codepen.png) + +**Firefox Developer Edition 111.0b3** + +![](/assets/images/posts/firefox-codepen.png) \ No newline at end of file diff --git a/src/assets/images/posts/chrome-codepen.png b/src/assets/images/posts/chrome-codepen.png new file mode 100644 index 0000000..824e0a9 Binary files /dev/null and b/src/assets/images/posts/chrome-codepen.png differ diff --git a/src/assets/images/posts/firefox-codepen.png b/src/assets/images/posts/firefox-codepen.png new file mode 100644 index 0000000..eae30fe Binary files /dev/null and b/src/assets/images/posts/firefox-codepen.png differ diff --git a/src/assets/images/posts/safaritp-codepen.png b/src/assets/images/posts/safaritp-codepen.png new file mode 100644 index 0000000..6b3a5c4 Binary files /dev/null and b/src/assets/images/posts/safaritp-codepen.png differ