Border и 9x9 "мрежа"

[lam3r4370]

Опитвам се да направя нещо такова - http://web-tourist.net/userfiles/4/4481.png с CSS.
Пробвах със следния код -
[css]
border-right-color: red;
border-right-width:3px;
border-right-color: red;
border-right-style: solid;
border-bottom-width:3px;
border-bottom-color: red;
border-bottom-style: solid;[/css]
, но показва рамка и на крайните долни и десни квадратчета(съвсем логично )
Та, въпросът ми е как може да стане тази "мрежа" само с CSS?
Може да е и нещо елементарно, но ми убягва.

 

[kriss]

<style>
div {width:30px;height:30px;background:#ddd;float:left;border:1px solid #fff;border-left:none;}
p {clear:both;}
.topleft,.topmid {border-right:1px solid #000;border-bottom:1px solid #000;}
.topright {border-bottom:1px solid #000;border}
.botleft {border-top:none;border-right:1px solid #000;}
.notop {border-top:none;}
</style>
<p>
<div class="topleft"></div>
<div class="topleft"></div>
<div class="topleft"></div>
<div class="topright"></div>
</p>
<p>
<div class="topleft notop"></div>
<div class="topleft notop"></div>
<div class="topleft notop"></div>
<div class="topright notop"></div>
</p>
<p>
<div class="botleft"></div>
<div class="botleft"></div>
<div class="botleft"></div>
<div></div>
</p>

 

[lam3r4370]

Идеята ми беше да стане само с class и едно задаване на стил, но и така става, благодаря

 

[kriss]

Аххх заради теб седнах да си пиша морски шах на js :X