Inverted
Border Radius

Some options based on your needs and skill level.
Styling applied only on base (Desktop) breakpoint for these examples.
  • Minimal calculations
  • Uses only Webflow elements
  • No custom code

EASIEST

SOLID BACKGROUND / NO BORDER
SOLID PARENT BACKGROUND
FLOW•GHOSTFLOW•GHOST
  • Minimal calculations
  • Custom code required (see embed at top of navigator)

INTERMEDIATE

BACKGROUND ALLOWED / NO BORDER
SOLID PARENT BACKGROUND
FLOW•GHOSTFLOW•GHOST
  • Quite a few calculations
  • Borders require more elements and positioning
  • Custom code required (see embed at top of navigator)

DIFFICULT

BACKGROUND ALLOWED / WITH BORDER
SOLID PARENT BACKGROUND
FLOW•GHOSTFLOW•GHOST

HARDER

BACKGROUND ALLOWED / NO BORDER
PARENT BACKGROUND ALLOWED
  • You'll have to create two SVG masks (using an external program such as Adobe Illustrator or Figma)
  • Making the masks will require rem to px calculations (remvalue * 16 = pxvalue)
  • Browser compatibility may not be 100% outside of Chrome, Safari and Firefox so make sure to test.
  • Custom code required (see embed at top of navigator)
FLOW•GHOSTFLOW•GHOST

HARDEST

BACKGROUND ALLOWED / WITH BORDER
PARENT BACKGROUND ALLOWED
  • You'll have to create two SVG masks (using an external program such as Adobe Illustrator or Figma)
  • Making the masks will require rem to px calculations (remvalue * 16 = pxvalue)
  • Borders require more elements and positioning
  • Browser compatibility may not be 100% outside of Chrome, Safari and Firefox so make sure to test.
  • Custom code required (see embed at top of navigator)
FLOW•GHOSTFLOW•GHOST
FLOW GHOST
Available for hire -
I'm Reggie3000 in the Webflow Community Discord. Come say hi and show me what you've done with this cloneable 👋
‍
FLOWGHOST.COM