all reset
☀ Lights
Netbax Online Editor Try it Yourself
Run
HTML
reset
copy
CSS
reset
copy
.smartphone { position: relative; width: 360px; height: 460px; margin: auto; border: 16px black solid; border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; } .smartphone:before { content: ''; display: block; width: 60px; height: 5px; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -50%); background: #333; border-radius: 10px; } .smartphone:after { content: ''; display: block; width: 35px; height: 35px; position: absolute; left: 50%; bottom: -65px; transform: translate(-50%, -50%); background: #333; border-radius: 50%; } .smartphone .content { width: 360px; height: 460px; background: #fff; }