How to create an inner border on an image banner using dawn theme?

Store Design
1

hey,

how do I create a inner border on a image banner like this -

itay1104_0-1699464687551.png
itay1104_0-1699464687551.png200×189 50 KB

I am currently using dawn theme

thanks

1 Like
2

Hi @itay1104

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

You can create inner border using css outline property and then move the outline inside the image by giving it negative value like this :

div{
   outline: 10px solid white;
   outline-offset: -10px;
 }
4

Something like this?

.banner__box {
        box-shadow: 0 0 0 1px white inset !important;
      }
5

doesnt work on mobile view

6

hey,

puresilver.co.il

7

where should i input this?

8

We will need to make it responsive on mobile view , so add the following code :

@media (max-width:600px){
 div{
     outline: 10px solid white;
   outline-offset: -50px;
  }

}
9

now it doesnt work on mobile and computer, i tried playing around with it, it seems the first line messes it up.

url if it helps - puresilver.co.il

thank you