How to achieve this custom shape?

Design help General
1

How can i achieve this top left edge shape?

Screenshot 2026-01-03 at 17.54.25
Screenshot 2026-01-03 at 17.54.251920×518 239 KB

2

Hi there,

To create unique shapes with curved edges in Webflow, you can customize individual corner radius values in the Style panel. Here’s how:

  1. Select the element you want to modify
  2. Navigate to the Style panel and expand the Borders section
  3. Click the chain icon next to Border Radius to unlink the corners
  4. Adjust individual values for each corner (top-left, top-right, bottom-right, bottom-left)
  5. Set specific corners to 0px while increasing others to create asymmetrical shapes

You can experiment with different radius values to create various design effects, from subtle curves to dramatic shapes.

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

3

You could pre-prepare the images, or float a white triangle over the top left corner.

But the right way is typically a CSS clip path, here’s a simple example; use whatever SVG you like.

https://codepen.io/memetican/pen/YPWwWbY/f9b2c4a2a171f1628b968a2e99d7b2e8

4

Can you explain to me how I can implement this into Webflow?

5

How’s this? It’s about the most detail I can give without building it for you. You’ll find a lot of resources on the web too.