As I strive to add a dotted border-style to the horizontal rule on my website, an interesting challenge arises when the Bootstrap-5 CDN is included. The border-style does not take effect as expected. Even on Codeply, the border-style works perfectly until the Bootstrap-5 Framework is introduced, causing it to revert to a normal state. Below is the CSS snippet I have applied to the horizontal rule class "horizontal-rule".
.horizontal-rule{
width: 5%;
border-style: dotted none none;
border-width: 7px;
}
I am eager to understand the reason behind this behavior and any possible solutions to resolve it. Any insights would be greatly appreciated.