Someone good at CSS help, my website design is dying
37 points by nortti
37 points by nortti
Ok, so the first attempt has a white area because the two borders aren't perfectly matched, which is easy to see if you zooming in.
The second one is asking the browser to clip the purple header inside the article and then draw on a white backgound. Because the edge pixels are semi-transparent, some white bleeds through on the edge. The easiest fix is to make the background-color of <article> purple.
Here's a quick mockup I did: example html.
Anti-aliased graphics can never quite fit together, so make sure they are always overlapping.
The inner border radius needs to be different because it's inside, so won't line up on its own. It will always have slight imperfections.
Reading:
With the border radius tool, notice how when the padding is zero, there are slight bits poking through from underneath? The only way to fix that is to have no radius on the inner div and overflow: hidden on the outer div.
https://codepen.io/editor/carlana/pen/019d64c9-9907-7df0-8ef3-fda97b69b678
I've got a terrible solution - since you know the size of the header decorations, you can just... not draw the article background in that area:
background: linear-gradient(
to bottom,
transparent 10px,
#000 10px
);
Potential terrible alternative (sorry, haven't checked this one but should work) background-clip: content-box; and add 10px top padding on the article but also -10px top margin on the header?