CODEWITHSUNDEEP
htmlcss
Sops
Sops

Reputation: 75

hr color isn't clear

I set the color of hr to white and it became unclear and blurry, and it looks like someone changed the opacity to 70%, like this:

enter image description here

How can I make it look as it should?

hr {
    border: 10px dotted white;
    border-style: none none dotted;
    background-color: #ed8d8d;
    width: 50%;
    margin: auto;
}
<hr>

-------So, this is what I can see from the 'inspection' page when I click HR-----

element.style {
}
hr:not([size]) {
    height: 1px;
}
hr {
    border: 8px dotted white;
    border-style: none none dotted;
    background-color: #ed8d8d;
    width: 30%;
    margin: auto;
}
hr {
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}
body {
    margin: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
*, ::after, ::before {
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}

Upvotes: 1

Views: 1545

Answers (2)

Prinju Koshy Vaidyan
Prinju Koshy Vaidyan

Reputation: 485

You have added opacity in your css

hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: .25;  //remove this

}

Upvotes: 2

Ollie
Ollie

Reputation: 439

By "blurry", I'm going to assume you mean this:

enter image description here

Just stick in an opacity: 100% line at the end to sharpen things up, or to what you want:

enter image description here

And the code:

hr {
    border: 10px dotted white;
    border-style: none none dotted;
    background-color: #ed8d8d;
    width: 50%;
    margin: auto;
    opacity: 100%
}

Upvotes: 2

Related Questions