CSS table border
CSS Tutorial » CSS Table border
Using CSS easy you can style tables where can have different borders styles and shapes.
How do you add different borders styles and shapes CSS?
ID | Nombre | Apellido | |
---|---|---|---|
1 | Clark | Kent | clarkkent@mail.com |
2 | John | Carter | johncarter@mail.com |
3 | Peter | Parker | peterparker@mail.com |
Browser Support CSS cell width and height
Element | ![]() Chrome |
![]() IE |
![]() Firefox |
![]() Opera |
![]() Safari |
Browser Support option | Yes | Yes | Yes | Yes | Yes |
How To Add CSS Table a Border
For the next example we add a border to a table and also borders around each table cell. Adding border, we used the CSS border property on table, th, and td elements.
For a better understanding we present an example:
<!DOCTYPE html>
<html>
<head>
<title>css rounded corners button link shadow - example</title>
<style>
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body><h2>Table Border</h2>
<p>CSS border property add border to the table</p>
<table align="center" style="width:99%">
<thead>
<tr style="background:#0C0">
<th style="padding:8px; border:2px solid blue">ID</th>
<th style="padding:8px; border:2px solid blue">Nombre</th>
<th style="padding:8px; border:2px solid blue">Apellido</th>
<th style="padding:8px; border:2px solid blue">Email</th>
</tr>
</thead>
<tbody>
<tr style="border:thin #FFF; background: #CCC">
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr style="border:thin #FFF; background: #CCC">
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Related subjects:
CSS table
CSS table border
Padding top bottom left right
CSS Table Padding
CSS Table size width and height
Tags: css table border radius, color, collapse, none, between cells, spacing, not showing, bottom, radius, not working, inside.
CSS Table Border radius
How do you add a border to a table in CSS?
To get rounded corners use the border-radius property to achieve the desired effect:
<!DOCTYPE html>
<html>
<head>
<title>css rounded corners button link shadow - example</title>
<style>table, th, td {
border: 2px solid blue;
border-radius: 10px;
}</style>
</head>
<body><h2>Table Border radius</h2>
<p>To get rounded corners use the border-radius property</p>
<table align="center" style="width:99%">
<thead>
<tr style="background:#0C0">
<th style="padding:8px; border:2px solid blue">ID</th>
<th style="padding:8px; border:2px solid blue">Nombre</th>
<th style="padding:8px; border:2px solid blue">Apellido</th>
<th style="padding:8px; border:2px solid blue">Email</th>
</tr>
</thead>
<tbody>
<tr style="border:thin #FFF; background: #CCC">
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr style="border:thin #FFF; background: #CCC">
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
In this chapter you can easily learn how:
How do you add a border to a table in CSS?
How do you add a border to a table in HTML?
How do I change the color of a table in CSS?
How do I style a table column in CSS?
Collapsed Table Borders CSS
To avoid double borders when designing a table, you need to set the CSS border-collapse property to collapse.
This will cause the borders where they are doble to remain in a single border
<!DOCTYPE html>
<html>
<head>
<title>css rounded corners button link shadow - example</title>
<style>table, th, td {
border: 2px solid blue;
border-collapse: collapse;
}</style>
</head>
<body><h2>Table Border collapsed</h2>
<p>Set CSS border-collapse property to collapse</p>
<table align="center" style="width:99%">
<thead>
<tr style="background:#0C0">
<th style="padding:8px; border:2px solid blue">ID</th>
<th style="padding:8px; border:2px solid blue">Nombre</th>
<th style="padding:8px; border:2px solid blue">Apellido</th>
<th style="padding:8px; border:2px solid blue">Email</th>
</tr>
</thead>
<tbody>
<tr style="border:thin #FFF; background: #CCC">
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr style="border:thin #FFF; background: #CCC">
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
css table border radius, color, collapse, none, between cells, spacing, not showing, bottom, radius, not working, inside.
CSS table border radius - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.