How to fill in the gap above the header - html

Question

I'm making a short little iMessage code block, and I'd like to fill in the gap above the header with the same grey color, that conforms to the outer border rounding on the top only. (I'd also like to make the gap a little smaller, which I believe is done by changing the margin-top, it just cuts over the outer border behind it.
#workskin .phone {
max-width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: table;
margin: auto;
border: 1px solid;
border-radius: 25px;
border-color: #B5B5B5;
background-color: #FFFFFF;
max-height: auto;
}
#workskin .header {
min-width: 300px;
background-color: #f6f6f6;
border-bottom: 1px solid #b2b2b2;
color: #000000;
font-weight: bold;
padding-bottom: .5em;
margin-left: -.5em;
margin-top: .5em;
margin-right: -.5em;
margin-bottom: -2em;
text-align: center;
text-transform: capitalize;
display: block;
}
#workskin .messagebody {
background-color: #FFFFFF;
display: table;
padding-left: .5em;
padding-right: .5em;
}
#workskin .text {
float: left;
color: #000000;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #e5e5ea;
max-width: 75%;
clear: both;
position: relative;
left: 1em;
}
#workskin .text::after {
content: "";
position: absolute;
left: -.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-right: 0.5em solid #e5e5ea;
border-bottom-right-radius: 1em 0.5em;
}
#workskin .breply {
float: right;
color: #FFFFFF;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #1289fe;
max-width: 75%;
clear: both;
position: relative;
right: 1em;
}
#workskin .breply::after {
content: "";
position: absolute;
right: -0.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1289fe;
border-bottom-left-radius: 1em 0.5em;
}
#workskin .time {
text-align: center;
padding: 0.5em 1em;
display: block;
}
#workskin .time::after {
content: "";
position: absolute;
right: -0.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1289fe;
border-bottom-left-radius: 1em 0.5em;
}
<div class="phone">
<p class="messagebody"><span class="header">Alya 😘😘</span><br />
<br />
<span class="time">3:02PM</span><br />
<span class="text">Hey girl are your classes done yet</span><br />
<span class="breply">Just finished</span><br />
<span class="breply">Why?</span><br />
<span class="text">Wanna get lunch before you go home?</span><br />
<span class="breply">Sure. Let’s go to the campus cafeteria though</span><br />
<span class="breply">I have homework to work on already 🙄</span><br />
</p></div>
I tried editing the header itself, but it rounds the entire container, not just the top.

Answer 1

Rather than having to play with negative margins, it seemed easier to just simplify the layout and CSS, as follows:
<div id="workskin">
<div class="phone">
<div class="header">Alya 😘😘</div>
<div class="messagebody">
<div class="time">3:02PM</div>
<div class="text">Hey girl are your classes done yet</div>
<div class="breply">Just finished</div>
<div class="breply">Why?</div>
<div class="text">Wanna get lunch before you go home?</div>
<div class="breply">Sure. Let’s go to the campus cafeteria though</div>
<div class="breply">I have homework to work on already 🙄</div>
</div>
</div>
</div>
#workskin .phone {
max-width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: table;
margin: auto;
border: 1px solid;
border-radius: 25px;
border-color: #B5B5B5;
background: linear-gradient(to bottom, #F6F6F6 0% 37px, #FFFFFF 37px 100%);
max-height: auto;
padding-bottom: 1em;
}
#workskin .header {
min-width: 300px;
border-bottom: 1px solid #B2B2B2;
color: #000000;
font-weight: bold;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
text-transform: capitalize;
}
#workskin .messagebody {
display: table;
padding-left: 0.5em;
padding-right: 0.5em;
}
#workskin .time {
text-align: center;
padding: 0.5em 1em;
}
#workskin .text,
#workskin .breply {
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
max-width: 75%;
clear: both;
position: relative;
}
#workskin .text {
float: left;
color: #000000;
background: #e5e5ea;
left: 1em;
}
#workskin .breply {
float: right;
color: #FFFFFF;
background: #1289fe;
right: 1em;
}
#workskin .text::after,
#workskin .breply::after {
content: "";
position: absolute;
bottom: 0;
width: 0.5em;
height: 1em;
}
#workskin .text::after {
left: -0.5em;
border-right: 0.5em solid #e5e5ea;
border-bottom-right-radius: 1em 0.5em;
}
#workskin .breply::after {
right: -0.5em;
border-left: 0.5em solid #1289fe;
border-bottom-left-radius: 1em 0.5em;
}
The background colour of the header is now actually coming from the .phone div using a linear gradient with stops instead of on the header element.
The challenge was that if you wanted the colour to just be on the .header element, you'd have to not round the .phone class on the top and use negative margins, which gets a tad messy.