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 · 0 comments
Open

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

cc0800 opened this issue Mar 20, 2024 · 0 comments

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.
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
1 participant
@cc0800