使用嵌套Div容器的圆角

Question

First of all, yes I know there are other threads on here that deal with various versions of this issue. I've reviewed them without much success at solving my problem. If I've missed one somewhere, please point me in that direction; otherwise I'm stuck on this at the moment.

Here's the deal.

I'm attempting to apply three graphics, a left border (left.jpg) and two top rounded corners (topleft.jpg and topright.jpg) to a container with a list of links in it.

The desired result should be a shadowed left border with the top two corners rounded.

My instructions call for this to be done using three nested div containers. From my research and books, everything appears to be correct in the code; however the two rounded corner graphics are not displaying and I can't find the reason for it.

I'm pretty certain I'm overlooking something simple, but after a couple of days working on it, I'm starting to go a little cross-eyed. I'm hoping a fresh set will spot what I'm missing. HTML and CSS code are below.

Thanks guys.

<div id="leftColumn">
    <div id="links">
        <div class="left">
            <div class="topLeft">
                <div class="topRight">
                    <ul>
                        <li><a href="#">Akari</a></li>
                        <li><a href="#">Divide by Box</a></li>
                        <li><a href="#">Fillomino</a></li>
                        <li><a href="#">Hashiwokakero</a></li>
                        <li><a href="#">Heyawake</a></li>
                        <li><a href="#">Hitori</a></li>
                        <li><a href="#">Kakuro</a></li>
                        <li><a href="#">Katagaku</a></li>
                        <li><a href="#">Masugo</a></li>
                        <li><a href="#">Masyu</a></li>
                        <li><a href="#">Nonogram</a></li>
                        <li><a href="#">Oekaki Logic</a></li>
                        <li><a href="#">Shikaku</a></li>
                        <li><a href="#">Sudoku</a></li>
                        <li><a href="#">Suhai</a></li>
                        <li><a href="#">Super Sudoku</a></li>
                        <li><a href="#">Tenketsu</a></li>
                        <li><a href="#">Tentai Show</a></li>
                        <li><a href="#">Wordoku</a></li>
                        <li><a href="#">Yajilin</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

div.left {background-image: url(left.jpg);
         background-repeat: repeat-y;
         background-position: left;
         box-shadow: 10px 10px 5px #888888}
div.top-left {background-image: url(topleft.jpg);
             background-repeat: no-repeat;
             background-position: top-left;
             border-radius: 25px}
div.top-right {background-image: url(topright.jpg);
              background-repeat: no-repeat;
              background-position: top-right;
              border-radius: 25px}

Answer 1

There is typo mistakes in your css that's the reason your css was not applying

div.top-left {...}
div.top-right {...}

should be

div.topLeft {...}
div.topRight {...}

Html

<div class="topLeft">
<div class="topRight">