CODEWITHSUNDEEP
htmlcss
Corinne
Corinne

Reputation: 2205

outline on only one border

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

Upvotes: 139

Views: 240718

Answers (8)

Gerry Bor
Gerry Bor

Reputation: 19

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>

Upvotes: 1

chowey
chowey

Reputation: 9836

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.

Upvotes: 206

Robin Wieruch
Robin Wieruch

Reputation: 15898

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;
  }
 }

Upvotes: 1

Andris
Andris

Reputation: 4193

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;}
}

Upvotes: 1

Giona
Giona

Reputation: 21114

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.

Upvotes: 55

thdoan
thdoan

Reputation: 19097

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/

Upvotes: -1

Thilanka De Silva
Thilanka De Silva

Reputation: 1088

Try with Shadow( Like border ) + Border 

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

Upvotes: 10

Database_Query
Database_Query

Reputation: 634

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

Upvotes: -3

Related Questions