'Applying border radius to image inside
I am trying to add border-radius to the left side of the slider(exactly like on the right side).
I tried giving relative positions and z-indexes to elements, but can't make it work.
Any help would be much appreciated.
PS. Open snippet in full page.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Solution 1:[1]
Just use overflow: hidden; with border radius
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px; overflow:hidden;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Solution 2:[2]
The border radius is applied to a div that contains the image. Try applying it to the image itself as well. Currently you're applying the radius to the div but it is covered by the image. You can see this if you temporarily remove the image, as it will show the rounded corners on the div behind it.
Try this:
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;border-radius: 20px 0 0 20px">
</div>
Only change is that I've added 'border-radius: 20px 0 0 20px' to the image style tag. this applies:
- 20px rounding to top-left
- 0px rounding to top-right
- 0px rounding to bottom-right
- 20px rounding to bottom-left
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Rohit Verma |
| Solution 2 |