← All elements
<div class="cs"><b>Corner focus</b></div>About this border
Two accent corners that stretch into full borders around the card on hover.
How it works
Two corner brackets are drawn with two borders each on the top-left and bottom-right pseudo-elements. On hover their width and height grow to 100 percent, so the brackets extend into a full frame.
Ways to customise it
- Change #6366f1.
- Edit the starting 22px size.
- Add the other two corners with extra elements.
Good to know
The effect is decorative, so keep the card readable without hover. Use focus-visible too for keyboard users.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.