<div class="pc-brackets">
<p class="pc-brackets__kicker">Limited run</p>
<p class="pc-brackets__main">40 pieces only</p>
</div>About this border
A viewfinder-style frame drawn as eight gradient lines in the corners that grow into a full border on hover.
How it works
Eight one-colour linear gradients are positioned in the four corners, two per corner, to draw viewfinder brackets. Their length comes from a registered custom property, --pc-l, so the browser can animate it. On hover the length grows from 22px to 50 percent and the brackets meet to form a full frame.
Ways to customise it
- Change --pc-b for the bracket colour.
- Change --pc-t for thicker or thinner lines.
- Change the 22px start length to show longer corners at rest.
Good to know
Animating a custom property needs @property, which current Chrome, Edge, Safari and Firefox support. In an older browser the brackets simply jump instead of growing. The frame is decoration, so put the real message in the text.
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.