The community members are discussing ways to create unique border and outline styles beyond the basic options provided in the MDN documentation. A community member suggests using ::before and ::after pseudo-elements, as well as creating absolutely positioned boxes with aria-hidden=true to achieve effects like frills, clouds, and vintage-style borders. They also mention using SVGs or images for certain styles and adjusting the width and negative margins of pseudo-elements to create a pink background effect. The community members exchange tips and try to replicate the suggested techniques, with one community member providing additional guidance on adjusting the image size and container width to achieve the desired result.
If I was coding these by hand, I would use ::before/::after pseudo-elements. With Webstudio I create a box and place it absolutely relative to the parent and then make sure to add aria-hidden=true to it.
For the vintage item, you'll need an svg or image.
For the pink background, you could set widths of higher than 100% on your pseudo-elements and use negative margins. They could be simple boxes with 1px height.
is there any chance you could record a short video of this to cement the understanding of the process? i think a visual of the process would help with the understanding
Add a width to the parent box, preferably using responsive units or within a flex or grid column. a. test with width 500px on the parent box, and auto left/right margins to center. You should be able to see what you need.
The "after" box needs a negative margin on the right/bottom.
I just put an arbitrary size. I wouldn't put a width on something in reality. I would put it within a container and set the image to full width of that. Then I'd possible setup an aspect ratio or object fill on there depending on what the image is.
The purpose of the demo was conceptual, it will have to be adapted for whatever your use-case is.