How do I make a border with NO outer border

Discussion in 'CSS' started by mattbf, Oct 23, 2009.

0
  1. #1
    Lets say the table has 2 rows and 2 columns...I would like it to look like this:

    [​IMG]

    Can someone help me with the CSS code for that? Thank you!
     
    Last edited: Oct 23, 2009
    mattbf, Oct 23, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You'd need to have individual CSS styles for each of the boxes, then set the individual borders for each box, like border-right:solid #000; for the top left box, border-left:solid #000; for the top right box etc..
     
    wd_2k6, Oct 24, 2009 IP
  3. MhW

    MhW Active Member

    Messages:
    370
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    85
    #3
    To add to wd_2k6's post, here's the code you'll need:

    HTML:
    <table border="0" cellpadding="0" cellspacing="0">
<tr>
	<td class="top-left">1</td>
    <td class="top-right">2</td>
</tr>
<tr>
	<td class="bottom-left">3</td>
    <td class="bottom-right">4</td>
</tr>
</table>
    Code (markup):
    CSS:
    td.top-left {border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 100px;}
td.top-right {border-bottom: 1px solid #000000; padding: 100px;}
td.bottom-left {border-right: 1px solid #000000; padding: 100px;}
td.bottom-right {padding: 100px;}
    Code (markup):
    Will produce:
    [​IMG]
     
    MhW, Oct 24, 2009 IP