Can I create a div box with sharp corners in Webflow similar to the example shown?

To create a div box with sharp corners in Webflow, you can adjust the border-radius properties to achieve the desired effect.

​

1. Add a Div Block

• Go to the Webflow Designer and locate your canvas where you want to add the div.
• Drag a Div Block from the Add panel to your desired location on the page.

​

2. Style the Div Block

• Select the Div Block on the canvas.
• Go to the Style panel on the right side of the screen.
• Set the Width and Height for your div to desired dimensions, say 200px by 200px, by typing these values in the respective input fields.
• Remove Border Radius: Ensure the border-radius property is set to 0px to maintain the sharp corners. If needed, toggle the border-radius setting off.

​

3. Set Background and Border

• Background Color: Choose a background color by selecting Background in the Style panel and clicking the color bar.
• Border: If you want a border, click on Border in the Style panel, and choose a border color, width, and type (solid, dashed, etc.).

​

4. Additional Styling

• Add Padding/Margin: Use the padding and margin settings in the Style panel to position your div as needed.
• Add Other Styles: Include shadow, hover effects, or animations if desired for extra visual effect.

​

Summary

To create a div box with sharp corners in Webflow, ensure the border-radius is set to 0px. Style it further by adjusting dimensions, background, and any additional design elements directly in the Style panel.