unexpected radius results with accordion, pretty cool

[hikingwithu2]

FYI - (no help needed, this is a demonstration) -
I'm in the process of developing a site for non-English speakers to learn conversational English (not grammar, as is the case with most English learning websites). While writing one of the pages I was experimenting with the radius and accordion and got some cool and unexpected results, you can see what I mean by looking at the page here - http://wiegand.org/ChipsEnglishHelp/a1-u0-intro.php

Maybe some of you have already come across this, I don't know, but this is the first time I've seen this effect, anywhere.
The accordion code I found on a website, then I added a radius of 10% to the <li> in the .css. Here's the code -

	/*
*    Author:    Michael Raffaele <michael@mraffaele.com>
*    Date:    25th October 2011
*    Info:     http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/
*/
/* Shared for all accordion types */
.accordion {
    font-family:Verdana,Geneva,sans-serif; 
    margin:0 auto;
    width:35em;
    padding:.5em;
    background:inherit;
}
.accordion ul {
    list-style:none;
    margin:0;
    padding:0;    
}
.accordion li {
    margin:0;
    padding:0;
    border-radius: 10%
}
.accordion [type=radio], .accordion [type=checkbox] {
    display:none;
}
.accordion label {
    display:block;
    font-size:.8em;
    text-align:center;
    line-height:.8em;
    background:inherit;
    border:0;
    color:#542437;
    font-weight:600;
    cursor:pointer;
    text-transform:uppercase;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
    background:#C02942;
    text-align: center;
    color:#FFF;
}
.accordion .content {
    padding:0 .5em;
    overflow:hidden;
    border:0;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
}
.accordion p {
    color:#333;
    margin:0 0 .5em;
}
.accordion h3 {
    color:#542437;
    padding:0;
    margin:.5em 0;
}

/* Vertical */
.vertical ul li {
    overflow:hidden;
    margin:0 0 .05em;
}
.vertical ul li label {
    padding:.5em;
    text-align: center;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom:0;
}
.vertical ul li label:hover {
    border:0;
}
.vertical ul li .content {
    height:0;
    border-top:0;
    text-align: center;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
    height:20em;
    border:0;
}