I am having difficulty getting border-radius to work properly. I cannot upload screen shots unfortunately.

I have a page with a series of divs like the one below and with that CSS. The text in the first div displays partly outside of the top of the div. The subsequent ones on the page seem to appear properly. I have tried w/ and w/o position relative. I have also tried with and without the box-shadow. If I remove border-radius and only have the shadow then it works fine. I put extreme margins to make the problem easier to see, but it happens even with smaller margins.

I have observed that resizing the page after loading it seems to correct the problem, but I cannot make it stop happening.

div.style {
width: 600px;
background-color: #ffffff;
border: 1px #ddd solid;
margin: 125px;
padding: 15px;
border-radius: 25px;
box-shadow: #ccc 0 0 .25em;
behavior: url(PIE.htc);
position: relative;
}

<div class="style">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac dui quam. Donec tincidunt sapien lectus. Integer hendrerit, magna ut convallis accumsan, quam enim luctus eros, in euismod justo massa et sem. Sed hendrerit aliquam nisi, id vulputate nisl accumsan ac.</p>
<p>Lorem ipsum dolor sit amet:</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Mauris ac dui quam.</li>
<li>Donec tincidunt sapien lectus.</li>
<li>Integer hendrerit, magna ut convallis accumsan, quam enim luctus eros, in euismod justo massa et sem.</li>
<li>Sed hendrerit aliquam nisi, id vulputate nisl accumsan ac.</li>
</ul>
</div>

The solution that I found was to move the margin to its own div around each of my content divs.