What causes the top edge gaps of the dashed border to be filled with blue color?
Why are the bottom edge gaps of the dashed border filled with white color?
...even when the background is set as a linear white-to-blue top-to-bottom vertical gradient.
Why do the left and right edge gaps of the dashed border not exhibit this issue?
https://i.sstatic.net/Pl6z9.png
The rendering above is produced by the code snippet below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="mycss.css" />
</head>
<body>
<div class="wrapper" style="height: 500px; width: 500px; margin-bottom: 1%;">
<div id="roundrec">Rounded Rect</div>
</div>
</body>
</html>
mycss.css
body
{
font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
font-size: 90%;
margin: 10px;
color: #333;
background-color: #ff0000;
}
.wrapper
{
display: table;
table-layout: fixed;
margin: 0px 0px .2% 0px;
padding: 0px;
border: 0px;
border-collapse: separate;
border-spacing: .2vmin;
vertical-align: middle;
font-size: 1vmin;
overflow: hidden;
}
#roundrec
{
display: table-cell;
width: 100%;
height: 100%;
color:#ccc;
background: -webkit-linear-gradient(#FFFFFF, #0000FF); /* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(#FFFFFF, #0000FF); /* Opera 11.1+ */
background: -moz-linear-gradient(#FFFFFF, #0000FF); /* Firefox 3.6+ */
background: linear-gradient(#FFFFFF, #0000FF); /* Standard syntax (must be last) */
padding: 0 0;
margin: 10px 10px;
border-collapse: separate;
border: 2vmin dashed #ccc;
border-radius: 10%;
cursor: default;
vertical-align: middle;
text-align: center;
font-size: 7em;
font-weight: 700;
}
What steps can I take to ensure that the upper and lower edge gaps appear like this?:
https://i.sstatic.net/zT7cc.png
...or at least resemble this?:
https://i.sstatic.net/J6Imi.png
EDIT:
The related question fails to address the gaps in the rounded corners of the dashed border because the padding box lacks rounded corners.