Bordas

A especificação das bordas da tabela é feita por meio da propriedade border. A estilização que será definida pela regra CSS pode ser aplicada tanto nas bordas externas da tabela, quanto em volta de suas células, ou seja, ela pode ser atribuída aos elementos table, th e td, conforme mostra a linha a seguir.

table, th, td {border: 2px solid black;}

Observe, na Figura 9, que a tabela estilizada com a regra CSS acima possui bordas duplas. Isso acontece porque cada elemento (table, th e td) possui bordas separadas e o browser insere um espaço entre essas bordas, dando um efeito de borda dupla. Para estilizar tabelas com uma única borda, como aquela mostrada na Figura 8, usa-se a propriedade border-collapse.

table {border-collapse:collapse; width:100%}

table,th, td{border: 2px solid #1E90FF;}

Trabalhar com os estilos de bordas no CSS3 tornou-se bem mais fácil com a adição de 3 novas propriedades. São elas: border-radius, box-shadow e border-image.

Na imagem abaixo temos um exemplo do uso das propriedades box-shadow e border-radius. A primeira define a sombra da borda e a segunda o nível da borda.