Top border radius in linear gradient background - html

Question

I am making testimonial feature in a carousel
This is the sample pic of what I wanted to achieve
And this is what I've achieved so far
https://jsfiddle.net/2we347xu/
but this time I wanted to make the top part of the rectangle a bit more rounded like the bottom part of it and so I used border-radius but it didn't turn out the way I wanted.
Here is my code
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.col-center {
margin: 0 auto;
float: none !important;
}
.carousel {
margin: 0px auto;
padding: 0 70px;
height: 100%;
background: linear-gradient(180deg, white 15%,#0E2149 15%);
border-radius: 20px;
}
.carousel {
position: relative;
}
.carousel .item {
color: #fff;
font-size: 14px;
text-align: center;
overflow: hidden;
min-height: 290px;
}
.carousel .item .img-box {
width: 200px;
height: 200px;
margin: 0 auto;
padding: 5px;
border: 10px solid #0E2149;
border-radius: 50%;
background: #fff;
}
.carousel .img-box img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.carousel .testimonial {
padding: 0px 0 0px;
line-height: 1.5;
color: #fff;
}
.carousel .overview {
font-style: italic;
}
.carousel .overview b {
text-transform: uppercase;
color: #7AA641;
}
.carousel .carousel-control {
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
background: none;
}
.carousel-control i {
font-size: 30px;
line-height: 65px;
position: absolute;
display: inline-block;
color: rgba(0, 0, 0, 0.8);
text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
margin-left: -5px;
}
.carousel .carousel-indicators {
bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 10px;
height: 10px;
margin: 1px 3px;
border-radius: 50%;
}
.carousel-indicators li {
background: #999;
border-color: transparent;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
.carousel-indicators li.active {
background: #555;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item carousel-item active">
<div class="img-box"><img src="images/cd logo.jpg" alt=""></div>
<p class="testimonial">Some text here
</p>
<p class="overview"><b>Paula Wilson</b>, Media Analyst</p>
</div>
<div class="item carousel-item">
<div class="img-box"><img src="/examples/images/clients/2.jpg" alt=""></div>
<p class="testimonial">Text here</p>
<p class="overview"><b>Antonio Moreno</b>, Web Developer</p>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
<div id="background"></div>
</div>
</div>
How do I achieve the look at the top part of the carousel?

Answer 1

Instead of that gradient you can use :before or :after pseudo elements, position it absolutely, under all other content, and do what you want.

Answer 2

It seems that it's working perfectly as expected. The problem here is that you are not able to view it because the background color of the top bar is white and so is your body background color. If you change it to something else, you'll see the difference.
Either you change the color of the linear gradient to
.carousel {
...
background: linear-gradient(180deg, grey 15%,#0E2149 15%);
/* You can use any other color than grey, it's just for demo purpose */
...
}
Or you can use pseudo selectors for achieving what you want.
Here's an example using ::before by setting it's position to absolute:
.carousel {
/* remove linear gradient from here! */
}
.carousel::after {
position: absolute;
left: 0;
top: 15%;
content: ' ';
width: 100%;
height: 85%;
background: #0E2149;
z-index: -1; /* To keep it below the content */
border-radius: 20px;
}
.carousel::before {
position: absolute;
left: 0;
top: 0;
content: ' ';
width: 100%;
height: 20%; /* Extra 5% */
background: white;
z-index: -2; /* To keep it below the content and the ::after element */
}

Answer 3

Are u expecting like this:
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
}
hr{
margin:2px 40px;
background-color:#cbcbcb;
color: #cbcbcb;
border-radius: 10px;
}
.col-center {
margin: 0 auto;
float: none !important;
}
.carousel {
margin: 0px auto;
padding: 0 70px;
height: 100%;
border-radius: 20px;
}
.carousel {
position: relative;
}
.carousel .item {
color: #fff;
font-size: 14px;
background-color: white;
text-align: center;
overflow: hidden;
min-height: 290px;
position: relative;
}
.carousel .item::after{
content: "";
display: block;
background-color:#0E2149;
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.carousel .item > *{
position: relative;
z-index: 1;
}
.carousel .item .img-box {
width: 130px;
height: 130px;
margin: 0 auto;
margin-top: 25px;
border-radius: 50%;
padding: 10px;
background-color:#0E2149 ;
}
.carousel .img-box img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.carousel .testimonial {
padding: 0px 0 0px;
line-height: 1.5;
color: white;
font-weight: bold;
font-size: 30px;
}
.carousel .overview {
font-style: italic;
}
.carousel .overview b {
text-transform: uppercase;
color: #7AA641;
}
.carousel .carousel-control {
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
background: none;
}
.carousel-control i {
font-size: 30px;
line-height: 65px;
position: absolute;
display: inline-block;
color: rgba(0, 0, 0, 0.8);
text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
margin-left: -5px;
}
.carousel .carousel-indicators {
bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 10px;
height: 10px;
margin: 1px 3px;
border-radius: 50%;
}
.carousel-indicators li {
background: #999;
border-color: transparent;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
.carousel-indicators li.active {
background: #555;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
<section class="second-section">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item carousel-item active">
<div class="img-box"><img src="https://dummyimage.com/300" alt=""></div>
<p class="testimonial">Some text here
</p>
<hr>
<p class="overview"><b>Paula Wilson</b>, Media Analyst</p>
</div>
</div>
<div class="carousel-inner">
<div class="item carousel-item">
<div class="img-box"><img src="https://dummyimage.com/300" alt=""></div>
<p class="testimonial">Text here</p>
<p class="overview"><b>Antonio Moreno</b>, Web Developer</p>
</div>
</div>
<div class="carousel-inner">
<div class="item carousel-item">
<div class="img-box"><img src="https://dummyimage.com/300" alt=""></div>
<p class="testimonial">Text here</p>
<p class="overview"><b>Antonio Moreno</b>, Web Developer</p>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
<div id="background"></div>
</div>
</div>
</div>
</section>