Transparent inner border for images
Cut a border from the inside of an image using the mask property and two gradients.
img {
--o: 20px; /* offset of the border*/
--b: 5px; /* border thickness */
mask:
conic-gradient(#000 0 0) no-repeat 50%/
calc(100% - 2*(var(--o) + var(--b)))
calc(100% - 2*(var(--o) + var(--b))),
conic-gradient(from 90deg at var(--o) var(--o),#0000 25%,#000 0)
0 0/calc(100% - var(--o)) calc(100% - var(--o));
}See the Pen Transparent inner border for images by Temani Afif (@t_afif) on CodePen.
Here is another demo with a hover effect
See the Pen Transparent inner border with hover effect by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Zig-Zag edges using CSS mask One line of code to add Zig-Zag edges to any element using the mask property.
- Split and assemble an image using CSS mask A few lines of code to create a fancy reveal animation for images.
- Trim extra space using text-box An interactive tool to illustrate how to trim the extra space below and above text.
- Perfectly center an uppercase text One line of code and you can have a true centering for any uppercase text.