0
170
Viewsto put border-pixel and border-radius around images
I try to create a container which hold a div with image
but around image I should to create another element border: 1px solid #C7B273; in four party:
top, bottom, left, right and give another property necessary for border px around image.
Image has border-radius:0;
By the UI/UX I understand that border: 1px solid #C7B273; should to stay margin-bottom after picture.
I try to do this:
img {
border: 1px solid #999;
border-radius: 10px;
padding: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
display: block;
z-index: 10;
}<div class="border">
<img src="./images/about.jpg" width="200px" height="256px" alt="Nature">
</div>And get this results:
But result final should be like image:
·
Juan Pablo Isaza
2 answers
Answer question0
Something like that?
.w {
height: 256px;
width: 200px;
position: absolute;
border: 1px solid #999;
border-radius: 10px;
}
img {
padding: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
display: block;
z-index: 10;
} <div class="border">
<div class="w"></div>
<img src="https://via.placeholder.com/900/gray" width="200px" height="256px" alt="Nature">
</div>
·
Juan Pablo Isaza
Report
0
.border {
height: 256px;
width: 200px;
position: relative;
}
.image {
position: relative;
width: 100%;
height: 100%;
display: block;
}
.div {
content: "";
border: 1px solid #C7B273;
border-radius: 10px;
position: absolute;
width: 95%;
height: 95%;
bottom: -10px;
left: -10px;
z-index: -1
} <div class="border">
<img
class="image"
src="https://placeimg.com/200/256/nature"
width="200px"
height="256px"
alt="Nature"
/>
<div class="div"></div>
</div>
·
Juan Pablo Isaza
Report
Answer question