Menu
How to apply an inset border into an HTML element, but just only on one side of it. Until now, I've been using an image to do that (GIF/PNG) that I would then use as a background and stretch it (repeat-x) and position a little off from the top of my block. Recently, I discovered the outline CSS property, which is great! But seems to circle the whole block... Is it possibly to use this outline property to do it on just only one border? Also, if not, do you have any CSS trick that could replace the background image? (so that I could personalize the colors of the outline later using CSS, etc). Thanks in advance!
Here's an image of what am trying to achieve: http://exiledesigns.com/stack.jpg
573
If you want to set a border to the left and right, use three values (write none to the first and third values). Example: border-style: none solid none none; // border will be applied only to the right side. border-style: solid none; // border will be applied only to the top and bottom sides.
Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
The outline-offset property adds space between the outline and the edge or border of an element. The space between an element and its outline is transparent. Outlines differ from borders in three ways: An outline is a line drawn around elements, outside the border edge. An outline does not take up space.
Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.
You can use box-shadow to create an outline on one side. Like outline, box-shadow does not change the size of the box model.
This puts a line on top:
box-shadow: 0 -1px 0 #000; I made a jsFiddle where you can check it out in action.
The syntax is box-shadow: offset-x | offset-y | blur-radius | color
INSET
For an inset border, use the inset keyword. This puts an inset line on top:
box-shadow: 0 1px 0 #000 inset; Multiple lines can be added using comma-separated statements. This puts an inset line on the top and the left:
box-shadow: 0 1px 0 #000 inset, 1px 0 0 #000 inset; For more details on how box-shadow works, check out the MDN page.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
