CSS shadow of a small border on a mobile phone

Question

I use shadow to get the color outside the element. It looks great on my desktop, but on my mobile device I see a small border, probably caused by the high PPI of my mobile screens. See screenshot below.

the code

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.container.main {
  background-color: #fff;
}

.header-main{
  height: 90px;
  box-shadow: 0px -15px 0px 15px #009fe3;
}

.container-row{
  position: relative;
  background-color: #009fe3;
  height: 90px;
}

<div class="container main">
  <header class="header-main">
      <div class="container-row">
          Put your text here!
      </div>
  </header>
</div>

Run code

Answer 1

To get rid of the border if this is your question? Try it: .header-main { background: #009fe3; } Hope this helps.

Answer 2

The shadow box should be used for off-course, shadow for boxes, and not for the solid color that you use. The result can be achieved using box-shadow also

.header-main {
    height: 90px;
    /* box-shadow: 0px -15px 0px 15px #009fe3; */
    background: #009fe3;
}

.container-row {
    position: relative;
    background-color: #009fe3;
    height: 90px;
    margin: -10px -15px;
    padding: 10px 15px 0;
}