HTML, CSS: Styling a link and making the whole div link

HTML, CSS: Styling a link and making the whole div link

I want to have a whole box (delimited by a < div >) containing a text act
as a link but I also want the text in that link to be styled. I can't seem
to get both:
(1)
HTML
<a href="#" onclick="toggle('category')"><div
class="categoryName">Test</div></a>
CSS
.categoryName {
border: 1px solid black;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-radius: 5px;
}
.categoryName a {
color: black;
text-decoration: none;
font-weight: bold;
}
In this case my whole box (the bordered < div >) acts as a link, but the
text "Test" is not styled (appears as a standard web link).
(2)
HTML
<div class="categoryName"><a href="#"
onclick="toggle('category')">Test</a></div>
CSS is the same
In this case the text is styled but my box no longer acts as a link, just
the text.
How can I have both my box acting as a link and the text styled?