beige.party

1 post1 participant0 posts today

Ana Tudor 🐯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 <a href="https://www.reddit.com/r/css/comments/1jvs81s/comment/mmeibts/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jvs81s/comment/mmeibts/</a>Live demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/rNJbEqM" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/rNJbEqM</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/borderRadius" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderRadius</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a>

Ana Tudor 🐯Know how border-image & border-radius don't play nice together?(interactive <a href="https://codepen.io/thebabydino/pen/jxZyed" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jxZyed</a>)<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!clip-path: inset(0 round $r)<a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo: <a href="https://codepen.io/thebabydino/pen/qBELJGY?editors=1100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qBELJGY?editors=1100</a>(and yes, this is a tip I first shared on twitter over half a decade ago <a href="https://x.com/anatudor/status/1219916121341644807" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://x.com/anatudor/status/1219916121341644807</a> )<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipPath</a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssClipPath</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/borderImage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderImage</a> <a href="https://mastodon.social/tags/borderRadius" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderRadius</a>

AntoineÐVous aussi vous avez une sensation étrange quand vous mettez deux fois la même <code>border-radius</code> à des éléments contenu l’un dans l’autre ? Cet outil permet de calculer la valeur du <code>border-radius</code> enfant, en fonction de la taille du <code>padding</code> ! <a href="https://mathieucorcessin.github.io/perfect-rounded-corners/" rel="nofollow noopener noreferrer" target="_blank">mathieucorcessin.github.io/perfect-rounded-corners/</a> <a href="https://kwak.cab/tags/CSS" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://kwak.cab/tags/Border-Radius" rel="nofollow noopener noreferrer" target="_blank">#Border-Radius</a>

Recent searches

Search options

Administered by:

Server stats:

#borderradius