---
title: "HTML table with rounded corners and gradient background"  
description: "HTML table with rounded corners and gradient background"  
author: "marcel ethan"  
published: 2013-03-02  
updated: 2013-03-02  
canonical: https://www.mindstick.com/forum/617/html-table-with-rounded-corners-and-gradient-background  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# HTML table with rounded corners and gradient background

Hi Everyone!

How to create html [table](https://www.mindstick.com/articles/43918/how-to-design-table-using-bootstrap) with corners and [gradient](https://www.mindstick.com/blog/161/gradient-background-in-c-sharp) [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) using css with compatible all [latest](https://www.mindstick.com/forum/159680/how-can-i-install-the-latest-version-of-sql-server) [browser](https://www.mindstick.com/blog/155254/which-is-the-best-internet-browser)

My html table as below

<table id="tblIncidentQueue">\
<tr>\
<td>\
<strong>Show </strong>\
<asp:[DropDownList](https://www.mindstick.com/articles/324837/how-to-bind-dropdownlist-in-mvc-core-from-database-using-entity-framework) ID="drpNumOfResults" runat="[server](https://www.mindstick.com/articles/43769/what-is-serverless-architecture-is-it-worth-switching-over)">\
<asp:[ListItem](https://www.mindstick.com/forum/23267/insert-a-listitem-to-a-dropdownlist) Text = "10" [Value](https://www.mindstick.com/articles/23219/an-optimized-description-adds-value-to-experience-and-in-turn-effectively-guest-posting-packages)="10" ></asp:ListItem>\
<asp:ListItem Text = "20" Value="20" ></asp:ListItem>\
<asp:ListItem Text = "50" Value="50" ></asp:ListItem>\
<asp:ListItem Text = "100" Value="100" ></asp:ListItem>\
<asp:ListItem Text = "All" Value="All" ></asp:ListItem>\
</asp:DropDownList>\
</td>\
</tr>\
</table>

Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)

## Replies

### Reply by AVADHESH PATEL

Hi Marcel!

Try this way!

<style type="text/css">\
.htnl_tbl\
{\
margin: 10px;\
-moz-border-radius: 10px; /* Firefox */\
-webkit-border-radius: 10px; /* Safari & Chrome */\
-khtml-border-radius: 10px; /* Linux browsers */\
border-radius: 10px; /* CSS3 compatible browsers */\
border-style: solid;\
border-width: 1px;\
border-color: #cccccc;\
padding: 0px;\
border-spacing: 0px;\
overflow: hidden;\
background: #eeeeee; /* Old browsers */\
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */\
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */\
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */\
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */\
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */\
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */\
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */\
}\
</style>

html code

<table id="tblIncidentQueue" class="htnl_tbl">\
<tr>\
<td>\
<strong>Show </strong>\
<asp:DropDownList ID="drpNumOfResults" runat="server">\
<asp:ListItem Text = "10" Value="10" ></asp:ListItem>\
<asp:ListItem Text = "20" Value="20" ></asp:ListItem>\
<asp:ListItem Text = "50" Value="50" ></asp:ListItem>\
<asp:ListItem Text = "100" Value="100" ></asp:ListItem>\
<asp:ListItem Text = "All" Value="All" ></asp:ListItem>\
</asp:DropDownList>\
</td>\
</tr>\
</table>


---

Original Source: https://www.mindstick.com/forum/617/html-table-with-rounded-corners-and-gradient-background

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.