Menu
Is it possible to make the color of the border the same as the background color? In my example, it should have the same color but the border color is always a bit darker than the background color.
.box { min-width: 50px; background: rgba(0, 0, 0, .2); border: 10px solid rgba(0, 0, 0, .2); }<div class="box">foo</div>
884
The background-color property in CSS is used to specify the background color of an element. On the other hand, if you only use “Background:” Property, you can either specify it's valued as an image URL or as a color code or specify the value of each background property in the below-given order.
From the specification: If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color. All borders are drawn on top of the box's background.
The CSS background-color property allows you to change the background color of an HTML element. You can set the background color for many elements, including a table, div, heading, and span element. When defining the color property, you should also define the background color.
You should specify background-clip: padding-box; (or content-box) because, by default, this property is set to border-box thus the background also covers the area under the borders.
The effect you're obtaining is actually due to a transparency overlapping (with a full-solid colour you wouldn't notice the issue), so that's the reason you're seeing the border a bit darker than the background colour
.box { min-width: 50px; background: rgba(0, 0, 0, .2); background-clip: padding-box; border: 10px solid rgba(0, 0, 0, .2); }<div class="box">foo</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
