How can i create a border outside a div like showed in image

Question

I am trying to create the border around the section as shown in the image but not sure how can move it few pixels out of the main box. Here is what I tried but its not exactly what I want.

HTML:




    Our Values


    
        Animal Welfare
        
            
        
    
    
    Food Safety
        
            
        
    
    
        Sustainability

CSS:

.img-background{
    background: #ffd203
}
.our-values-image-container{
    padding: 0px 40px;
}

Here is the output:

[![enter image description here][1]][1]

[![enter image description here][2]][2]

user_15176686 · Answer

Here you should use some CSS properties:

The overflow property that may help you if the text goes out the
or the container.
I see that you may want to create a shape as background for your image, so the shape property will help you.

After importing the image, the overflow property turns important here if you want to write on the image.

Now, with position: absolute; make your image stand above the shape. This will help you: Position

I advise you to use classes and ID when using CSS.

user_14225299 · Answer

Just add box shadow to the image

* {
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

img {
  width: 500px;
  box-shadow: -30px -30px 0px yellow;
}

How can i create a border outside a div like showed in image

2 Answers