close
close
Shinanala
Home

table css rounded corners

2 min read 03-10-2024
table css rounded corners

Rounding Table Corners with CSS: A Simple Guide

Adding rounded corners to your HTML tables can instantly enhance their visual appeal, making them look more modern and user-friendly. This simple CSS technique can transform the look of your website or application, adding a touch of polish and sophistication.

Let's say you have a basic table like this:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

This table looks rather plain. We can easily style it with rounded corners using CSS:

table {
  border-collapse: collapse;
  border-radius: 10px; 
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

This CSS code accomplishes the following:

  • border-collapse: collapse;: This eliminates any spacing between table borders, creating a clean and uniform look.
  • border-radius: 10px;: This is the key property for creating rounded corners. Here, we've set the radius to 10px. You can adjust this value to control the roundness of the corners. Larger values create softer curves.
  • border: 1px solid #ddd;: This adds a thin border to each cell, making the table more visually defined.
  • padding: 8px;: This adds some internal spacing around the content of each cell, making the table more readable.

Understanding border-radius

The border-radius property is a versatile CSS tool. You can use it to round individual corners or all corners at once:

  • Rounding all corners: border-radius: 10px;
  • Rounding specific corners:
    • Top-left: border-top-left-radius: 10px;
    • Top-right: border-top-right-radius: 10px;
    • Bottom-left: border-bottom-left-radius: 10px;
    • Bottom-right: border-bottom-right-radius: 10px;

Beyond Basic Rounding:

You can explore more creative styling options:

  • Elliptical corners: You can create elliptical corners by using two values for border-radius, for example, border-radius: 10px 20px;. The first value controls the horizontal radius, and the second value controls the vertical radius.
  • Partial rounding: You can use the border-top-left-radius, border-top-right-radius, etc., properties to round only specific corners, creating unique and interesting table designs.

Further Resources:

By incorporating rounded corners, you can elevate your table's appearance and create a more polished user experience. Experiment with different border-radius values and combinations to find the perfect look for your website or application!

Latest Posts

Popular Posts