Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentation page (simply set the border-radius for .btn to 0.15rem).
- The artifacts appear around the entire border (or slightly inside) when the border-radius is set to 0.15rem.
- I have observed this phenomenon in both the latest Chrome and Edge browsers.
- This issue occurs on both the Bootstrap 4 and Bootstrap 5 documentation pages.
- Interestingly, the pixel patterns are random and seem to change unpredictably when hovering over the buttons.
Question
Is this a known bug that others have experienced, or is it specific to me?
https://i.sstatic.net/XHWmW.png
Magnified
https://i.sstatic.net/WCx8g.png
.btn {
border-radius: 0.15rem !important;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1a1d2c3d5b405f405d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<button type="button" class="btn btn-primary>Primary</button>
<button type="button" class="btn btn-secondary>Secondary</button>
<button type="button" class="btn btn-success>Success</button>
<button type="button" class="btn btn-danger>Danger</button>