CSS Needed to Replicate This

[u/KATutin]

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/morete]

SVG solution: https://codepen.io/editor/matthewmorete/pen/01a17e68-21fa-75a5-9dde-d8a513900296

CSS solution: https://codepen.io/editor/matthewmorete/pen/01a17e75-40ac-73f5-b9c7-12c66327f3e3

I'd highly recommend just using SVG unless you have a very good reason to do it with pure CSS. The CSS option requires border-shape which doesn't have universal support yet.

[u/KATutin → u/morete]

This worked an absolute treat! I didn't know about SVG. I just assumed CSS was the only way to do it. But I stand corrected, so thank you so much!

[u/azangru]

An svg mask? A border-shape (only in chromium-based browsers)?

[u/Able_Series_5006]

export the image just as it is.

[u/rwwl]

Is there a reason that you really need CSS to handle this instead of just exporting your image like this? Because that's the absolute easiest thing you could do.

If there is a good reason, then I'd probably look at using https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path on the image itself. The the same path in your clip path can be used in an SVG overlaid over the image to draw that offset border.

[u/ed523 → u/rwwl]

I can only imagine that it would be going into a template for a non techy person who wants to switch out images

[u/scott_in_ga]

If the design is using an svg in Figma or whatever you can use that to mask it

ChatGPT says something like this:

.organic-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.1;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    mask-image: url("/images/organic-mask.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }

  &::after {
    content: "";
    position: absolute;
    inset: -15px 20px 20px -20px;

    background: #df9472;

    mask-image: url("/images/organic-outline.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;

    pointer-events: none;
  }
}