Online Forum To Support Coders With Technical Assistance - Read Write Execute

How to apply border radius on table row

Ankit Agrawal
Ankit Agrawal
Published on January 30, 2016 · 1 min read
<table>
<tr class="head">
	<td>Title 1</td>
	<td>Title 2</td>
</tr>
<tr>
	<td>Col 1</td>
	<td>Col 2</td>
</tr>
<tr>
	<td>Col 1</td>
	<td>Col 2</td>
</tr>
<tr>
	<td>Col 1</td>
	<td>Col 2</td>
</tr>
</table>

<style>
table{
	width:100%;
	border-collapse: collapse;
}
tr td{
	padding:10px;	
}
tr.head td{
	background-color:#D83125;
	color:#fff;
}
tr.head td:first-child{
	 border-top-left-radius: 10px;
	 border-bottom-left-radius: 10px;
}
tr.head td:last-child{
	 border-top-right-radius: 10px;
	 border-bottom-right-radius: 10px;
}
</style>


Was this article helpful?
Ankit Agrawal

Ankit Agrawal

Author & Senior Engineer at CodeExecute

Writing practical engineering guides, debugging real-world bottlenecks, and creating free tools for developer productivity.

← Previous Article Difference between Blur and spread in Box -shadow Next Article → How to Remove Mailed-by Header in CakePHP?