Add bottom border radius or bg image

Sorry – i think this will work – but with my method you got that little message posibility in the gradient section and –
you can have all gradients (even images) in that second color-section without making allways another png file for it.

create your layout in this way:
you need for it two color-sections
the first color-section with your image and the content – i give a custom class to it:
background-with-content
the following second color-section – this is only for the gradient ( and maybe one short info text) with custom class:
background-with-message

the image and the gradient could be done in the alb element itself as you know allready.

put this to your quick css:

.avia-section.background-with-content {
  border-bottom-right-radius: 200px;
  z-index: 5;
  position: relative;
}

.avia-section.background-with-message {
  position: relative;
  margin-top: -200px;
  z-index: 0;
}

.avia-section.background-with-message .container {
    height: 300px !important
}

.avia-section.background-with-message .container .content {
    vertical-align: bottom;
    padding-bottom: 20px !important
}

looks this way: https://webers-testseite.de/rounded-background-gradient/

Edit: on very small screens you had to make a rule for that message in the gradient container.
padding-bottom or font-size etc.

well if you put in quick css this – you will see that it could work this manner you started.
But : there’s too much else wrong. Have a look at your navigation and the logo behaviour on small screens. Mobile devices so to speak.
I think one should first dedicate oneself to this topic. And then go to Borderstyling.

#av_section_2.test3 {
 position:relative !important;
 z-index:1 !important;
 background:transparent url(https://bright.itsomimedia.nl/wp-content/uploads/Rand_Bright_lichtgrijs.png) !important;
 height: 340px;
 margin: -300px auto 0;
 background-size: 100% 100% !important;
 background-repeat: no-repeat !important;
 background-clip:padding-box
}

btw: after you have seen the test-page i delete your images!
it’s just to show you how it could look like.

Nice, thank you!! I only use the background image overlay in first section and the layer is overlapping the 2nd section. How can I fix that?

first get rid of that negative margin: margin-top: -330px; maybe you set it on alb element ?

your png : 744/2480 = 0,3 that is the reason vor 30vw ( videoscreen width)
you can change your code to – that will work too – but is not so precise ( vectorbased svg is much better)

.test3 {
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
    background-size: cover !important;
    width: 100vw;
    height: 31vw;
    top: -30vw;
}

but think of the same non-transparent color : it has to be the same vallue as the following container ( #f5f3ed )
Important: z-index has to be 1 otherwise the overlayed color will overlay the next section too

after that your content of the next color-section has to go up:
maybe:

.test3 + div .container {
    margin: -40vw auto 0 !important;   
    position: relative;
}

margin here is important for responsive case too!

you can select it directly as #av_section_3 but the code above will automatically take the next sibling container.