Help with custom website frame

Hi there guys, new here!:waving_hand:t3:
I would like to create a custom frame for my website like the attachment but can’t seem to make that cut to the border that is not radius based, but I want it sharp like that, how can I make that possible?

Thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi there,

While Webflow doesn’t have built-in tools for creating custom frame cuts or non-radius based border designs, there are several creative workarounds you can explore:

You can achieve custom frame effects by using absolute-positioned elements with background colors, masks, or SVG shapes. Another approach is to create your custom frame design in a vector editing tool, export it as an SVG, and implement it as a background image or mask in Webflow.

For non-radius border designs, consider using the ::before and ::after pseudo-elements with transforms and clips to create angular or custom-shaped borders. You can also overlay multiple elements with different border styles to create more complex effects.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.