Inner Border Over Images with CSS

Inner border over images with CSS?

You can do this without having an extra element or pseudo element:

http://cssdeck.com/labs/t6nd0h9p

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline

Alternate solution that doesn't require knowing the dimensions of the image:

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}

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>

CSS Inner Border on Image on Hover

Add a wrapper and pseudo-element

You cannot apply any style directly to the image that will give it an inset border on hover. But you can achieve the desired effect by wrapping each image in some kind of container element and adding an ::after pseudo-element with the applied border.

.border {  display: inline-block;  position: relative;}.border::after {  content: '';  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  box-shadow: inset 0 0 0 0 rgba(255,255,255,.5);  transition: box-shadow .1s ease;}.border:hover::after {  box-shadow: inset 0 0 0 10px rgba(255,255,255,.5);}img {  display: block;  position: relative;}

<div class="border">  <img src="http://placehold.it/150" /></div>

Inner Border on the top of the image

you can add this code in your css

    .image {
      width:200px;
      height:200px;
      float:left;
      background:black;
      margin:10px;
      box-sizing:border-box;
      position:relative;
    }
    .image:before {
      content:'';
      opacity:0;     
}
    .image:hover:before {
      position:absolute;
      height:5px;
      width:100%;
      top:0px;
      background:red;
      z-index:100;
      content:'';
      -webkit-transition:all .5s;
      opacity:1;
    }

<div class="image"></div>

Offset a border over an image

Wrap the image with an inline block, and set an absolutely positioned pseudo-element as the border:

body {  padding: 50px 0 0 80px;}
.imageContainer {  display: inline-block;  position: relative;}
.imageContainer::before {  position: absolute;  top: -5%;  left: -15%;  width: 100%;  height: 100%;  border: 4px solid #77B244;  content: '';}

<div class="imageContainer">  <img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0"></div>

Border inside an image with margin

You just need a single element with :before or :after all is up to you

the Demo : http://jsfiddle.net/6a95A/1/

the markup:

<figure></figure>

Sample Image

the style

figure{
    width:200px;
    height: 180px;
    position:relative;
    background-image:url(http://24.media.tumblr.com/tumblr_m2scelXYGA1qbmtexo1_500.jpg);
    background-size:cover;
    background-position:50%;
}
figure:before{
    content:'';
    position: absolute;
    left: 2%;
    top: 2%;
    width: 95%;
    height: 95%;
    border: 1px solid white;
}

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>

Inner Border Over Images with CSS