CODEWITHSUNDEEP
htmlcssangular
Itai Elidan
Itai Elidan

Reputation: 272

CSS Box shadow on div not working on the edge

I have a div with a background color and box shadow as following:

position: absolute;
top:50%;
transform: translateY(-50%);
padding: 30px 20px 50px;
box-shadow: 0px 0px 10px 10px darkgray inset;
background-color: darkorange;
width: 250px;
height: 60%;
overflow-y: auto;

now, when the height is set to 60% there is a tiny orange line that is out of place:

Image with orange line

It is difficult to spot, but you can easily see it when you zoom in. in any other height setting, the tiny line above doesn't show. Do you know what the problem is? BTW, I am using angular if that matters

EDIT:

here is the html as a snippet:

.scoreboard-background{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  padding: 30px 20px 50px;
  box-shadow: 0px 0px 10px 10px darkgray inset;
  background-color: darkorange;
  width: 250px;
  height: 60%;
  overflow-y: auto;
}

#game-container{
  padding: 2vh 1vw;
  background-color: darkgray;
  height: 100vh;
  width:100%;
}

.game-background{
  height: 100%;
}
<div id="game-container">
  <div class="game-background" style="">
    <div class="scoreboard-background" style="">
    </div>
  </div>
</div>

NOTE: view it in full screen

Upvotes: 0

Views: 100

Answers (1)

Jagjeet
Jagjeet

Reputation: 61

The blur() CSS function can be used to remove that slight pixelation that occurs along the borders of the div.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur

.scoreboard-datadiv {
       
        position: absolute;
        padding: 30px 20px 50px;
        width: 290px;
       
        height: 60%;
    }
    .scoreboard-background {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 30px 0px 50px;
        box-shadow: 0px 0px 10px 10px darkgray inset;
        background-color: darkorange;
        width: 290px;
        height: 80%;
        overflow-y: auto;
        filter: blur(3px);
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -ms-filter: blur(3px);
        z-index:0;
    }
    .scoreboard-data {

       position:absolute;
       margin-left:20px;
       margin-top:10px;
       z-index:1;
    }

    #game-container {
        padding: 2vh 1vw;
        background-color: darkgray;
        height: 100vh;
        width: 100%;
    }

    .game-background {
        height: 100%;
    }
<div id="game-container">
    <div class="game-background" style="">
        <div class="scoreboard-datadiv">

            <div class="scoreboard-background" style="">               
            </div>
            <div class="scoreboard-data">
                Your Data
            </div>

        </div>
    </div>
</div>

Upvotes: 2

Related Questions