How to draw mobile device edge using CSS? - html

Question

I'm quite new to CSS and need some help make a mobile edge using CSS.
How can we draw the mobile device edge using CSS? This is what I have tried but unable to do so.
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 2px 2px #555555;
margin: 1px;
outline: #666666 solid 2px
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
This is what it should look like :
How do we do that?

Answer 1

I would double up on your box-shadow declaration instead of trying to wrangle outline:
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
margin: 1px;
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
The 0px 0px 0px 1px #666666 syntax gives the shadow zero blur and a 1px offset, essentially replicating a 1px stroke.

Answer 2

Try this one
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
font-size: 41px;
border: solid #616161 1px;
text-decoration: none;
box-shadow: 0px 1px #555555;
margin: 1px;
display: flex;
}
.mobile:hover {
text-decoration: none;
}
<div style="width: 210px; height: 45px; border: solid #000 1px;" class="mobile">
<div style="width: 210px; height: 45px; border: solid #fff 1px; " class="mobile">
<div style="width: 200px; height: 40px;" class="mobile">
</div>
</div>
</div>