Various methods for expanding a box while preserving the border radius

Ana Tudor / filed under HTML & CSS

I’ve recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there’s a rectangle with rounded corners expanding in the back. Being the curious creature that I am, I had to check how this works! Turns out, the rectangle in the back is an absolutely positioned ::after pseudo-element.

Subscribe to newsletter

Best design and frontend links delivered to your inbox every day and week. No spam, unsubscribe at anytime.

Choose frequency

Privacy Policy