Dashed and dotted borders do not appear unless border-radius is set

Open cc0800 opened this issue 2 years ago • 1 comments

When CSS border-style is set to dashed or dotted, no border is drawn on objects unless the style also includes a border-radius setting that is at least 1 pixel larger than the size of the border.

<html><head><style type="text/css">
	body {
		padding: 0;
		overflow: hidden;
	}
	.corner {
		width: 32px;
		height: 32px;
		background: red;
		border: 2px dotted white;
	}
</style></head>
<body><div class="corner"></div></body></html>

Adding border-radius: 3px; to .corner will cause the border to display:

If the border-size increases, the border will disappear again unless the border-radius is also increased.

Mar 20 '24 23:03 cc0800

The problem also occurs for table rows, and the border-radius trick does not work there:

<html lang="en">
<head>
<style>
    tr.dotted {
        outline: 2px dotted black;
        border-radius: 3px;
    }
    tr.dashed {
        outline: 2px dashed black;
        border-radius: 3px;
    }
</style>
</head>
<body>
<table>
    <tbody>
        <tr class="dotted">
            <td>This row should have a dotted border</td>
        </tr>
    </tbody>
</table>

<br>

<table>
    <tbody>
        <tr class="dashed">
            <td>This row should have a dashed border</td>
        </tr>
    </tbody>
</table>
</body>
</html>

It appears correctly in Chrome. Is there any workaround to get dotted or dashed table borders in Ultralight? (Without adding a div within the row.)

Jul 12 '24 23:07 JohnKlenk