home.social

#borderradius — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #borderradius, aggregated by home.social.

  1. Ana Tudor 🐯 @[email protected] ·

    Can you help me out, mastodon? 🦣

    When exactly did `outline` start following the `border-radius` rounding? Because in the beginning, that wasn't the case. When did that change? When did the change land in browsers?

    Thank you!

    Boosts appreciated.

    #CSS #code #coding #frontend #web #dev #borderRadius #webDevelopment #webDev

    #css #code #coding #frontend #web #dev
  2. Ana Tudor 🐯 @[email protected] ·

    Ever want a box where the padding or content box (inner) rounding is bigger than the border-radius?

    You can do it with a single element, no pseudos! Here's my take on it, including the particular case where you don't want any outer rounding, but sharp corners reddit.com/r/css/comments/1jvs

    Live demo on @codepen
    codepen.io/thebabydino/pen/rNJ

    #CSS #borderRadius #coding #frontend #web #dev #webDev #webDevelopment #code

    #css #borderradius #coding #frontend #web #dev
  3. Ana Tudor 🐯 @[email protected] ·

    Know how border-image & border-radius don't play nice together?

    (interactive codepen.io/thebabydino/pen/jxZ)

    #tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

    clip-path: inset(0 round $r)

    @codepen demo: codepen.io/thebabydino/pen/qBE

    (and yes, this is a tip I first shared on twitter over half a decade ago x.com/anatudor/status/12199161 )

    #CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius

    #webdevelopment #code #frontend #borderimage #borderradius #tinycsstip