How do I make a box change radius when hovering in Dreamweaver CS6 CSS

Question

I am trying to make the radius of my box containing text change when I hover over the link. I don't want the link to be the text itself because I need the link to span across each of my images.
So here is my HTML:
<div id="contentbox">
    <div id="pageblock">
       <div id="cdphoto">
             <h2><a href="costumedesign.html"><div class="h2box">COSTUME DESIGN</div></a></h2>
       </div>
       <div id="gdphoto">
       <h2><a href="graphicdesign.html"><div class="h2box">GRAPHIC DESIGN</div></a></h2>
       </div>
       <div id="hmphoto">
       <h2><a href="hairandmakeup.html"><div class="h2box">HAIR &amp; MAKEUP</div></a></h2>
CSS:
.h2box {
  height: 20px;
  width: 240;
  margin-top: 272px;
  -moz-box-shadow: inset 0 0 10px #777777;
  -moz-box-shadow: inset 0 0 10px #7777777;
  box-shadow: inset 0 0 10px #777777;
  background-color: #000;
  opacity: 0.8;
help

Answer 1

Moved to the main Dreamweaver support forum.
Without seeing the actual web page, it's difficult to give definitive advice on CSS. However, there are several problems with your HTML markup.
It looks as though you're using <h2> tags for a navigation menu. <h2> tags are for second-level headings. They're not suitable for menu items.
You have <div> elements nested inside your <h2> elements. A <div> is a standalone element that forms a block of its own. It cannot be used inside a text element, such as a heading or a paragraph. To apply markup to a part of a text element, you should use <span> instead of <div>.
The simple answer to your original question, though, is to apply border-radius to .h2box:hover.
.h2box:hover {
   border-radius: 15px;
But for better help, post a URL to the page you're working on. Seeing everything in context makes a big difference to the advice that anyone can offer.