Outline on Only One Border

outline on only one border

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>

Outline border bottom only

To get around the problem you can use border-bottom, with it set margin-bottom: -1px (the size of the border). This will stop it from moving the content below.

HTML:

<div></div>
test

CSS:

div {
    width: 100px;
    height: 100px;
    background: #eee;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}

DEMO HERE

css outline left and right

You could possibly achieve this using two box shadows:

div {  margin: 10px;  padding: 10px;  width: 100px;  height: 10px;  box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;}

<div></div>

How can I set a css border on one side only?

#testdiv {
   border-left: 1px solid;
}

See the MDN documentation on border.

Is there a shorter way to write a border on only one side?

You can apply border-width of 2px only to the top edge according to the documentation as following

<div class="border-t-2 border-blue-900">foo</div>

The error made was there is no utility class called border-t-1 in tailwind-CSS. Also applying border utility class adds the the CSS styling of border-width: 1px; which adds a border-width to all sides.

Check out the solution at tailwind playground

EDIT: Check out shingo.nakanishi's answer top apply border-top-width of 1px if you are using JIT mode

Remove on one specific input its outline and keep only the border

You can do something like this:

fiddle to playaround.

#input_field {
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

.OutlineNotNeeded {
  border: none;
}

.OutlineNotNeeded:focus {
  outline: 0;
}

<div id="input_field">
  <input type="text" class="OutlineNotNeeded" name="q" size="50">
</div>

CSS3 Outline dashed border on one side only

If you can't use border-right, putting the outline around the ::after pseudo-element might be a solution...

div {  width: 125px;  height: 160px;  background-color: #edb103;}
div::after {  display: inline-block;  width: 0;  height: 158px;  content: '';  position:relative; left:125px; top:1px;  outline: 1px dashed #0b0000;}

<div></div>

---

Related Topics