How Can I Create Corner-Only Borders in CSS?

Creating Corner Borders with CSS

In CSS, it's possible to achieve a distinctive look by displaying borders only on the corners of an element. This effect is commonly used in design to create decorative frames or emphasize specific areas.

CSS Solution

Here's a code snippet that creates corner-only borders:

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;
}

Explanation

This solution utilizes the -webkit-mask property to create a conic gradient. The gradient is defined with two distinct color stops: one at the corner (75%) and one at the beginning (0%). By applying this mask, the border is effectively concealed except at the corners.

Modification

To adjust the size of the corners, simply modify the value of the --s variable. Additionally, you can customize the border thickness and color as desired.

Alternative Solution

Some CSS libraries, such as PureCSS, provide pre-built CSS classes for corner-only borders. This approach simplifies the code even further:

img {
  border-radius: 10px;
}

.border-corner-only {
  border-width: 0px;
  border-top-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 0px;
  border-left-width: 5px;
}

By wrapping the image in an element with the border-corner-only class, you can easily apply corner borders without any complex masking techniques.

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