Gaps of dashed borders with gradient background

Question

Why are the top edge gaps of the dashed border filled with blue color ?
Why are the bottom edge gaps of the dashed border filled with white color ?
...when the background is set as a linear white-to-blue top-to-bottom vertical gradient.

Why don't the left and right edge gaps of the dashed border have this problem ?

The above rendering is generated by the following code:

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;
}

How can I correct this so the uper and lower edge gaps look like this ?:

...or at least like this ?:

EDIT:
The related question does not address the gaps in the rounded corners of the dashed border, bacause the padding box does not have round corners.

bacground-origin:border-box – Temani Afif Apr 17 '21 at 22:41 — Temani Afif, Apr 17 '21 at 22:41

score 1 · Accepted Answer · answered Apr 17 '21 at 22:41

1

The background-clip CSS property with value padding-box can be used to get the second result. Using background-clip: border-box along with background-repeat: no-repeat I was able to get a single color under the border, but not the actual gradient.

answered Apr 17 '21 at 22:41

Altareos

843
6
13

This does not solve the original question... – biberman Apr 17 '21 at 22:55
Yes, adding `background-origin: border-box;` below the `background: linear-gradient...` entry in the `#roundrec` section, accomplishes the 1st desired effect. – George Robinson Apr 17 '21 at 23:35
...and adding `background-clip: padding-box;` below the `background: linear-gradient...` entry in the `#roundrec` section, accomplishes the 2nd desired effect. – George Robinson Apr 17 '21 at 23:35

Gaps of dashed borders with gradient background

1 Answers1