CSS Border-Radius Shows Parent's Style - html

Question

I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!

Answer 1

Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}

Answer 2

I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.

Answer 3

One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!