Vamos falar sobre cinco formas de fazer cantos arredondados, a clássica com imagens e trê formas com CSS (sendo uma com CSS puro e outra com JavaScript) - Adicionada uma técnica que utiliza o Jquery

Índice:
Lagura Fixa
Largura Variavel
CSS
Java Script
Jquery

- Com imagens é a mais simples e nesse caso vamos utilizar o Fireworks para desenhar e definir as imagens:

topo 1 - Largura fixa:

Crie um novo arquivos, por exemplo com as larguras 200X200

Desenhe um Rounded Rectangle que preencha todo espaço

Crie um Slice no centro do retangulo

Exporte a imagem com o HTML, o Fireworks já irá recortar a imagem e exportar em pedaços

Usando o Dreamweaver, basta importar em Insert>>Image Objects>> Fireworks HTML, ele irá importar a estrutura do html criado pelo fireworks, ai basta apagar o centro da figura e colocar as suas informações.

topo 2 - Lagura variável:

Utilize os mesmos passos da largura fixa, mas quando for inserir o Slice, você deverá inserir o slice do centro e mais 4 slices, um para cada canto, nestes 4 tome cuidado para recortar exatamente no ponto onde inicia e termina a circunferência dos cantos, isso é importante para não ter diferença na imagem quando incluir a informação no html.

Exporte e importe da mesma forma.

Depois de importar, você irá apagar a imagem de centro

Para as bordas retas, defina a imagem como fundo da célula e apague a imagem

Nos cantos mantenha a imagem

Sempre ao inserir os dados, verifique as larguras das celulas para que o html não duplique as imagens de fundo ou desloque as imagens dos cantos estragando o seu retangulo.

O fireworks costuma exportar spacers, que serve para manter as alturasXlarguras das células, você terá que avaliar se eles são realmente necessàrias na sua página, pois há vezes onde estes spacers criam uma linha transparente entre uma célula e outra.

De qualquer forma o básico está pronto, agora basta limpar os detalhes.

topo 3- Agora como CSS

1 - no primeiro caso, iremos criar uma tabela e através do CSS iremos criar uma ilusão de ótica fazendo parecer com que as bordas seja redondas

este é o CSS que iremos usar:
<style type="text/css">
<!--
.bordaBox {bbackground: ttransparent; }
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#ffffff; border-left:1px solid #999; border-right:1px solid #999;}
.bordaBox .b1 {margin:0 5px; background:#999;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo_left {display:block; background:#ffffff; border-left:1px solid #999; width:1px; }
.bordaBox .conteudo_right {display: block; background:#ffffff; border-right:1px solid #999;width:1px; }
-->
</style>

e esta é a tabela:

<table width="100" border="0" cellspacing="0" cellpadding="0" class="bordaBox">
<tr>
<td colspan="3" scope="col"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></td>
</tr>
<tr>
<td width="2" class="conteudo_left " scope="col">&nbsp;</td>
<td width="100%" valign="top" align="center" scope="col">dados da tabela </td>
<td width="54" class="conteudo_right" scope="col">&nbsp;</td>
</tr>
<tr>
<td colspan="3" scope="col"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></td>
</tr>
</table>

E esse é o resultado:

	dados da tabela

veja que na formatação da tabela, criamos os cantos com as tags <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>, ou seja, cada <b> cria um pixel sobreposto e isso faz com que pareça que as bordas são redondas na borda inferior, invertemos a sequência para que o efeito fique para cima e as classes conteudo_right e conteudo_left criam as bordas laterais.

essa técnica é interessante para criamos uma tabela onde todo o fundo terá a mesma cor, mas quando precisamos por exemplo trocar a cor da primara linha teremos problemas pois o efeito irá criar uma linha em branco (ou com a cor que você definir) antes da <td> onde irão os dados no centro.

topo 4- agora juntando CSS com JavaScript

A classe javascript que iremos usar foi criada por Alessandro Falciniti e ela é usual no IE, Firefox, Safari e Opera.

Ela irá utilizar o evendo onLoad da página para chamar a função Nifty:

<head>

<script type="text/javascript"> window.onload=function(){ Nifty("tag#nome","parametro"); } </script>

</head>

Explicando por partes:

Nifty( = nome da função

"tag" = indicação do seletor que você quer arredondar, os seletores aceitos são:

seletores	Exemplo
tags	"p" "h2"
id	"div#header" "h2#about"
class	" div.news" "span.date" "p.comment"
descendentes de ID	"div#content h2" "div#menu a"
descendentes de Class	cantos superiores "ul.news li" "div.entry h4"
grupos ou qualquer combinação dos seletores	"h2,h3" "div#header,div#content,div#footer" "ul#menu li,div.entry li"

"nome" = nome ou id do seletor que você quer arredondar

"parametro" = abaixo estão os parâmetros possíveis, que podem ser utilizados em combinação

Parâmetro	Significado
tl	canto superior esquerdo
tr	canto superior direito
bl	canto inferior esquerdo
br	canto inferior direito
top	cantos superiores
bottom	cantos inferiores
left	cantos da esquerda
right	cantos da direita
all (default)	todos os cantos
none	nenhum dos cantos
small	tamanho dos cantos pequenos (2px)
normal (default)	tamanho dos cantos normal (5px)
big	tamanho dos cantos maior (10px)
transparent	aplica transparência do canto para o preenchimento interno (veja um exemplo )
fixed-height	para ser aplicado quando uma altura (height) é fixa e definida no CSS

neste endereço você irá baixar a classe, a css e alguns exemplos http://www.html.it/articoli/niftycube/NiftyCube.zip

agora vamos ao exemplo prático:

em uma página copie o seguinte código:

<head>

<style type="text/css">
<!--
div.teste{clear:both;width:208px;background: #cccccc;text-align:center; margin:2px }
-->
</style>

<script type="text/javascript" src="caminho_onde_esta_a_classe/niftycube.js"></script>

<script type="text/javascript">
window.onload=function(){
Nifty("div.teste","small");
}
</script>

</head>
<body>
<div class="teste"> teste de cantos arredondados com o Nifty Cube</div>
</body>

e este será o resultado:

teste de cantos arredondados com o Nifty Cube

referência http://www.html.it/articoli/niftycube/index.html

topo 5- Jquery

Mais uma forma bem interessanta é utilizar o jQuery Corner

- baixe esse script: jquery.corner.js

- linque dentro da tag head da sua página dessa forma: <script type="text/javascript" src="jquery.corner.js"></script>

- antes do marcador que você quer arredondar escreva este script:
<script type="text/javascript">
$(function(){
$("seu_marcador por exemplo div.box").corner("round");
});
</script>

Essa classe é bem flexível e permite uma grande variedade de formatos, veja a página de exemplos:
Exemplos de formatos

Referência: http://methvin.com/jquery/jq-corner-demo.html

É isso, Aproveite!!

Flavio Ribeiro
www.spyderit.com.br