Section backgrounds | CSS vs. Image

Design help Layout & Design
1

Having an issue isolating one corner of a block/section
to either be rounded off or a different color. I’ve included an example of what the right side of the website should look like as you scroll down the page. You’ll see a rounded grey corner and an angled corner with color at the footer. Unsure if I should load an image into each section or use CSS. Any help/guidance is much appreciated.
example-corners

2

Hi there,

Here’s how you can customize your element’s corners and borders in Webflow:

For rounded corners:

  1. Select your element
  2. Go to the Style panel
  3. Open the Borders section
  4. Use the corner radius controls to adjust all corners uniformly, or click the chain icon to adjust individual corners

For custom border colors:

  1. In the Style panel, locate the Borders section
  2. Click the border color selector
  3. Click individual border sides to apply different colors
  4. Choose your desired colors from the color picker or input specific hex codes

To add box shadows:

  1. In the Style panel, find the Effects section
  2. Click the + icon next to Box Shadow
  3. Adjust the shadow’s position, blur, spread, and color
  4. Add multiple shadows by clicking the + icon again for layered effects

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

3

Hey @A-a-ron,

You should be able to set the border radius of one corner via the borders section in the designer.
So if the the body element background is white & the section background is that gray gradient, you’ll see the rounded corner.

image
image318×183 8.61 KB

4

Hi, thank you both for your feedback. Trying these solutions out now.