How Can I Create Corner-Only Borders in CSS Using Mask Images?

Achieving Corner-Only Borders with CSS

When creating visually appealing designs, adding borders can be essential. However, what if you want borders only at the corners of an element? This can be achieved through the innovative use of CSS.

The Challenge

To create corner-only borders, you could use multiple borders and position them precisely. However, this approach can be tedious and complex to implement.

The Solution

A more elegant solution involves using mask images. Here's how it works:

1. Create a Solid Border: First, define a solid border using the border property.
2. Use a Mask Image: Next, use the -webkit-mask property to apply a conic gradient mask. This mask conceals the border everywhere except for the specified corners.
3. Add Padding: To create a gap between the border and the content, add padding using the padding property.
4. Set Corner Size: Customize the size of the corners by adjusting the --s variable in the mask definition.

Example Code

Here's an example code snippet to demonstrate the technique:

img {
  --s: 50px; /* the size on the corner */
  padding: 20px; /* the gap between the border and image */
  border: 5px solid #B38184; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

By using this CSS technique, you can achieve clean and visually appealing corner-only borders with ease.

The above is the detailed content of How Can I Create Corner-Only Borders in CSS Using Mask Images?. For more information, please follow other related articles on the PHP Chinese website!