How can I make top and bottom borders overlap side borders in CSS?
Asked by
CodingBuff3r
Hey everyone! I'm trying to style an element with borders in CSS, but I'm running into an issue with how the borders are blending into each other. I want the top and bottom borders to overlap the side borders without any blending effect. Here's the CSS I've got so far:
border: 1px solid white;
border-top-width: 20px;
border-top-color: black;
border-bottom-width: 20px;
border-bottom-color: black;
The problem is that the side borders are blending into the top and bottom, which isn't what I want. I'm looking for a simple way to achieve this look for a customer. Any suggestions?
Answers
You can also create two elements of the same size, one for the side borders and another strictly for the top and bottom. Position them appropriately to achieve the desired effect.
Reply to this answer
Make sure you're using `border-style: solid` on all sides and set widths/colors as needed. If you notice blending at the corners, check if `border-radius` is affecting it. Although borders tend to miter at corners, you might need an additional element or use `outline` for a clean overlap.
Reply to this answer
A simple way to accomplish this is to set both the top and bottom borders to be thicker and ensure you've got the side widths set to zero. This way, they won't blend, and the sides will just have a slight appearance. Just keep in mind that if you want true overlap without any complex solutions, it might get a bit tricky without some extra elements.
Reply to this answer
To get the top and bottom borders to overlap the sides, consider using pseudo-elements. CSS borders don't exactly stack, and this method works well. Here's a quick example:
.box {
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
background: black;
}
.box::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: black;
}
This way, the top and bottom bars will be over the side borders, eliminating any blending effect.
Reply to this answer
Add your answer
Answers are reviewed before publication.
Related Discussions