Multi tool use

How to give a colour property to top and bottom border line of a row

I was wondering how to colour the top and bottom border line of each rows, and disable the sides colour of it, I have attached a pic of what I am trying to achieve.

3 Answers
3

Use border-bottom/top (means border only to top and bottom)

border-bottom/top

top

bottom

td, th {
border-bottom: 1px solid #dddddd;
border-top: 1px solid #dddddd;
}


Learn here:https://www.w3schools.com/css/css_border.asp

See example:

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border-bottom: 1px solid #dddddd;
border-top: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

If borders are for a DIV:

border-top: 1px solid Green;

border-bottom: 1px solid Green;


Hope it helps.

you can use something like this

div
{
border-top-color:red;
border-bottom-color:red;
}


This will make the colour red,
hope this solves your doubt

border-top-color:red;

=

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.