I want the border line on, for example, the bottom of the div or td not to extend the entire width of the div or td. There should be a gap on left and right. How do I achieve this in CSS?

table with gaps

1 answer

This was chosen as the best answer

Borders always extend the full padding-width of an element (right to the corners including any padding).

For the effect you desire, the element with the border would have to use a margin. This may require use of a wrapper element in some circumstances.

Answered about 9 years ago by Richard Grevers
  • Thanks. Could you explain, then, how to get the effect using margins? I have added another illustration which presents the idea more simply. JoshuaFox about 9 years ago
  • judging by that image, you're not going to get the effect your after at all with CSS borders. Not without a lot of trickery and wrapper divs. ( e.g. one for each vertical, and a wrapper for the two horizontal lines. ) better off using images for the background if you can. orta about 9 years ago
  • I agree - with your new image, there's no way of creating the layout with borders without zillions of extra elements. Richard Grevers about 9 years ago
  • Thank you. I achieved the effect with a special extra column and a background image: http://saveadullam.org/hebrew/information.html JoshuaFox about 9 years ago