Round the corners of a section

Ask the community
, ,
1

Question:
I want to round the corners of a section. How do i do that?

Product:
Wix Editor

What are you trying to achieve:
I have a welcome section. I would like to round the bottom corners of that section. I tried shape dividers but it doesn’t exactly help in simply rounding the corners. I would like my welcome sections bottom corner to look like this:
Capture

What have you already tried:
I tried to enable the dev tools and created a styles.css file in the public code section. then i tried to write css code to round the corners using the section id “section1” but it didn’t work. I am not very good at coding so i don’t know what to do next.

Additional information:
I googled a bit and found that all the tutorials are pointing towards how to round the corners or edit similar features of an element inside a section but not the section itself. that is, i can write css to manipulate an element inside a section but i can’t find a way to manipulate the section.

2

It might be possible to apply CSS - alternative (and the method I tend to use for these cases), is to add a stretched container to the section and then placing everything within the container. This way, you’ll get the full editing capabilities of the container (corners, border etc.)

1 Like
3

Are you using the regular editor or the studio editor?

4

I’m using the regular wix editor

5

I’m guessing your trying to achieve the following (or something similar):

RoundedSection
RoundedSection1920×686 20.4 KB

It’s pretty easy. All you need is an iFrame-Element (yes not the ideal solution, but it works).
→ Paste this code into the iFrame:

<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .white-box {
            width: 100%;
            height: 100vh;
            background-color: white;
            border: none;
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>

<iframe class="white-box" scrolling="no"></iframe>

</body>
</html>

Then stretch the iFrame-Element to full width in the Editor…and there you go! Feel free to play around with the settings.

Hope this helps :slight_smile: