Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
cc0800 opened this issue Mar 20, 2024 · 1 comment
Open

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

cc0800 opened this issue Mar 20, 2024 · 1 comment

Comments

@cc0800
Copy link

cc0800 commented Mar 20, 2024

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>

image

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

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

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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JohnKlenk @cc0800