How Can I Create CSS Borders That Only Appear in the Corners of an Element?

Border Dilemma: Displaying Only Corner Borders

If you've been searching for a way to create border lines that are exclusively confined to the corners of an element, CSS has got you covered. Below, we'll guide you through a solution using a technique known as "masking."

The approach involves defining a border for the entire element, then applying a mask to selectively hide the border except for the corners. This can be achieved with the help of the conic-gradient() and linear-gradient() functions.

Here's how you can do it:

img {
  --s: 50px; /* Adjust this value to change the corner size */
  
  padding: 20px; /* Modify this value to alter the gap between the border and image */
  border: 5px solid #B38184; /* Change the border thickness and color as needed */
  -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;
}

The conic-gradient() creates a gradient that hides the border except at the corners, while the linear-gradient() ensures that the gap between the border and the image remains transparent.

By adjusting the --s value, you can control the size of the corner borders. In the example above, the size is set to 50px, giving you sharp corners.

You can now incorporate this technique into your projects to create visually appealing borders that emphasize the corners of your images or other elements.

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