outline on only one border

Question

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).

Here's an image of what am trying to achieve: http://exiledesigns.com/stack.jpg

Your link is dead. You can just paste the image directly into the question using the picture tool. — toddmo, Nov 01 '15 at 19:25

score 186 · Answer 1 · edited Mar 23 '21 at 18:22

186

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.

edited Mar 23 '21 at 18:22

SoyChai

320
2
11

answered Sep 17 '13 at 04:34

chowey

9,138
6
54
84

4

I like this creative approach, thank you for sharing! – NPC May 14 '15 at 19:06
You didn't create an inset border and you don't explain the syntax for box-shadow. Thanks. – toddmo Nov 01 '15 at 19:28
This one has limitations, if custom style border needed! – Andris Sep 28 '18 at 11:39
Outline respoects `border-radius` http://jsfiddle.net/skd8y5r3/ – Alex78191 Jul 14 '22 at 11:44

score 55 · Accepted Answer · edited Jul 24 '16 at 19:25

55

Outline indeed does apply to the whole element.

Now that I see your image, here's how to achieve it.

.element {
  padding: 5px 0;
  background: #CCC;
}
.element:before {
  content: "\a0";
  display: block;
  padding: 2px 0;
  line-height: 1px;
  border-top: 1px dashed #000; 
}
.element p {
  padding: 0 10px;
}

<div class="element">
  <p>Some content comes here...</p>
</div>

(Or see external demo.)

All sizes and colors are just placeholders, you can change it to match the exact desired result.

Important note: .element must have display:block; (default for a div) for this to work. If it's not the case, please provide your full code, so that i can elaborate a specific answer.

edited Jul 24 '16 at 19:25

GKFX

1,386
1
11
30

answered Oct 01 '12 at 10:56

Giona

20,734
4
56
68

Hello Giona, I just added an image to my question to make it more clear: I need space in between the limits of my block and my border. – Corinne Oct 01 '12 at 11:13
Thanks @GionaF, but it seems the border still is 'above' the block and not 'inside'. (what is \a0 ? just random content to create the block?) http://www.exiledesigns.com/stack2.jpg (I tried with 5px of padding but nothing changed) – Corinne Oct 01 '12 at 11:24
@CorinneStoppelli your div is `float`ed? In that case, my demo won't work. Can you add the code of the element in your question? Because it can be done in many different ways. And yes, \a0 is a white space – Giona Oct 01 '12 at 11:26
Hey thanks Giona, I just saw your code note and I started doing it on a blank file, and it worked out - no, it's not floated, but there's probably a conflict with something somewhere cause I have loads of things in there. From here I can find the issue, thank you :) – Corinne Oct 01 '12 at 11:29
Why did you do `a0` as opposed to `" "`? – Dominic Jul 29 '15 at 09:38
1

@DominicTobias i actually can't remember ;-) – Giona Jul 29 '15 at 13:41
1

For reference, `\a0` is a non-breaking space. – Nov 10 '16 at 07:18
1

For my use case, took this and modified a bit. Needed to add absolute position to top and a width of 100% on the element with the :before pseudo class, and relative position to the element, in case anyone else has the same issue. – josh1978 Jun 21 '18 at 17:50

score 10 · Answer 3 · answered Nov 07 '13 at 05:29

10

Try with Shadow( Like border ) + Border

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;

answered Nov 07 '13 at 05:29

Thilanka De Silva

1,088
13
15

score 2 · Answer 4 · edited May 17 '23 at 20:45

2

I have another great solution, maybe it will be useful for someone

.button {
    border-bottom: 2px solid transparent;
}
.button:hover {
    border-color: #000000;
}

<div class="button">
  Content
</div>

edited May 17 '23 at 20:45

Magnum π

53
1
8

answered Jun 09 '22 at 14:10

Gerry Bor

21
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ethan Jun 10 '22 at 01:09

score 1 · Answer 5 · answered Sep 28 '18 at 11:38

1

I know this is old. But yeah. I prefer much shorter solution, than Giona answer

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

answered Sep 28 '18 at 11:38

Andris

3,895
2
24
27

score 1 · Answer 6 · answered Dec 24 '18 at 05:42

I like to give my input field a border, remove the outline on focus, and "outline" the border instead:

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

You can also do it with a transparent border:

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

score -1 · Answer 7 · answered Nov 16 '13 at 07:42

The great thing about HTML/CSS is that there's usually more than one way to achieve the same effect. Here's another solution that does what you want:

<nav id="menu1">
    <ul>
        <li><a href="#">Menu Link 1</a></li>
        <li><a href="#">Menu Link 2</a></li>
    </ul>
</nav>

nav {
    background:#666;
    margin:1em;
    padding:.5em 0;
}
nav ul {
    border-top:1px dashed #fff;
    list-style:none;
    padding:.5em;
}
nav ul li {
    display:inline-block;
}
nav ul li a {
    color:#fff;
}

http://jsfiddle.net/10basetom/uCX3G/1/

score -2 · Answer 8 · answered Oct 01 '12 at 10:55

-2

only one side outline wont work you can use the border-left/right/top/bottom

if i an getting properly your comment

enter image description here

answered Oct 01 '12 at 10:55

Database_Query

626
4
14

2

How to make the border-left/right/etc inset? Like for example, 3 pixels away from the block border but **inside**? – Corinne Oct 01 '12 at 10:56
@CorinneStoppelli could you explain ? – Database_Query Oct 01 '12 at 11:00
@Database_Query, I think that you missed the part of using the outline propert (or similar), which means that he doesn't want to add more weight/height to the div. The border property actually does add, but outline doesn't. The box-shadow alternative, seems to be a better option, even if you need to play a little bit with its' options. – xarlymg89 Feb 10 '14 at 17:30

outline on only one border

8 Answers8

Linked

Related