how do i put the border inside the picture-CodePudding

I want the border to be positioned inside the image, red background just to show the border.

#example {
  border: 50px dotted black;
  background: red;
  width:600px; 
}

img{
  width:100%;
  height:auto;
}

<div id="example">
 <img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>

CodePudding user response：

You can use i, it doesn't affect the box-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #example {
            display: inline-block;
            position: relative;
            width: 600px;
        }
        #example:before {
            display: block;
            content: '';
            position: absolute;
            top: 4px;
            right: 4px;
            bottom: 4px;
            left: 4px;
            border: 50px dotted black;
        }
        img {
            width: 100%;
            height: auto;
            vertical-align: middle;
        }
    </style>
    <div id="example"><img
            src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600" />
    </div>
</body>
</html>

CodePudding user response：

You can use outline, it doesn't affect the box-model

  outline: 50px dotted black;
  outline-offset: -50px;

CodePudding user response：

Try to add outline and outline-offset to (img) looks like the example below:

#example {
  border: 50px dotted black;
  background: red;
  width:600px; 
}

img{
  width:100%;
  height:auto;
  outline: 10px solid rgba(0,0,0, 0.5);
  outline-offset: -10px;
}

<div id="example">
 <img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>