How to Do an Inset Border with a Border Radius on an Image

How to do an inset border with a border radius on an image

Use an extra div and consider pseudo element:

.img {
border-radius: 16px;
display: inline-block;
overflow: hidden;
position: relative;
}

.img:before {
content: "";
position: absolute;
border-radius: inherit;
border: 3px solid #fece40;
inset: 16px;
}

img {
display: block;
}
<div class="img"><img src="https://picsum.photos/id/237/200/200"></div>

Inset border-radius for an image

One way:

<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<img src='http://placehold.it/400x300'>
</div>

CSS:

.container {
position:relative;
margin:50px auto;
width:400px;
}
.dot1 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
left:-25px;
top:-25px;
}
.dot2 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
right:-25px;
top:-25px;
}
.dot3 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
right:-25px;
bottom:-25px;
}

.dot4 {
background-color:white;
width:50px;
height:50px;
border-radius:100%;
position:absolute;
left:-25px;
bottom:-25px;
}

Demo: http://jsfiddle.net/ofejxfj6/

You can tweak it a little (size of circles/dots and dimensions), but it is pretty close, IMHO.

Applying border radius to image inside

Just use overflow: hidden; with border radius

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Inset border-radius with CSS3

The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:

div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}

The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.

Obviously this depends on support for rgba and gradient, and accordingly should be treated as a progressive enhancement, or if it's essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn't support gradient even up through IE9).

CSS inset border radius with solid border

the demo:
Jsfiddle here

Code

figure {
position: relative;
width: 200px;
height: 120px;
margin: 100px auto;
overflow: hidden;
border: 1px solid black;
border-right: none;
border-bottom: none;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

figure:before,
figure:after {
content: '';
position: absolute;
}

figure:before {
right: -50%;
top: 0;
background: transparent;
width: 172px;
height: 200px;
border: 1px solid black;
border-radius: 100%;
box-shadow: 0 0 0 100em red;
}

figure:after {
left: -1px;
bottom: 0px;
height: 16px;
width: 128px;
border-top-left-radius: 0;
border-bottom-left-radius: 5px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
<figure></figure>

How to add border inner side of image using CSS

That one's quite simple. Put the image in a container, and give it an after. Give that after a absolute position and a border.

See the example:

.gallery {  height: 300px; /* change/remove as required */  width: 400px; /* change/remove as required */  border-radius: 10px; /* change/remove as required */  overflow: hidden;  position: relative;}
.picture:after { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 2px solid pink; border-radius: 10px; content: ''; display: block;}
<div class="gallery">    <div class="picture">            <img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="http://lorempixel.com/400/300" alt="Picture of $25 Virtual Gift Card">
</div></div>

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve
(as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.



Related Topics



Leave a reply



Submit