Someone good at CSS help, my website design is dying

Background

I have a web page that is made of several "cards" (I guess) that have a header and a body content:

<article>
	<header>
		<h2>title</h2>
	</header>
	some content element
	another content element
</article>

Or, you know, just take a look at the source for this page.

I'd like to have the top corners of each "card" rounded, and a 1px thick border around each card.

First attempt at rounding

I'll just apply border-radius: 8px 8px 0 0; to the <article>

Wait, why did that do nothing?

Second attempt at rounding

By default overflow escapes its containing box, so we should apply the border-radius to the <header> too.

Alright, we have rounded corners!

With a border

I add a border that is similar to, but a bit darker than, the colour of the header to give a bit of contrast. What was so hard about all that?

Wait. What is that?

Screenshot of the top-right corner. Something looks a bit weird along the border.

Enhance.

Some pixels between the header and the border are lighter and less saturated than either.

Why is it mixing in white between #d2bfff and #b19edc? It wasn't doing that before. Or was it?

Close-up of the top-right corner without the border. Some of the outermost pixels are lighter and less saturated.

אוי(oy) וויי(vey)

Why it is mixing in white between `#d2bfff` and `#b19edc`

What we want is to have the <article> be a container for its contents: all parts of it should be composited together, and then clipped so that nothing overflows its boundary. (Or something with equivalent results.) But that is not what the CSS we've written is asking the browser for, is it?

Instead, what we're doing here is clipping two things that go on top of each other first and then compositing them. Since the rendering is anti-aliased, the pixels on the edge of the curve are going to be partially transparent; thus the browser ends up compositing semi-transparent lilac on top of semi-transparent white on top of fully opaque light blue. By the composition step we've lost the information that these are two fully coincident opaque surfaces. (And quite possibly our corner radii end up mismatched too here – I can never remember how the border interacts with it here.)

The proper way to get the behaviour of an element being a container for its child elements is the overflow property. Let's remove the border-radius from the <header> and add overflow: auto; to the <article>.

I mean, it's better than before, but some white is still bleeding in. At this point I have no clue how to solve this problem.

Any ideas? If so, please contact me.