How to Set a CSS Border on One Side Only

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

Combining border-top,border-right,border-left,border-bottom in CSS

No, you cannot set them all in a single statement.

At the general case, you need at least three properties:

border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;

However, that would be quite messy. It would be more readable and maintainable with four:

border-top:    1px solid  #ff0;
border-right:  2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left:   5px solid  #09f;

Creating a CSS Inside Border on One Side

Is this what you're after?

http://jsfiddle.net/m8A3e/1/

First of all I removed the float because floats and position: absolute; can't be used together. Then I gave the li relative positioning and gave the marker the proper top/right positions.

How to set Stylesheet for only one side of border in QLineEdit and QPushButton?

I think only one myLineEdit->setStyleSheet("QLineEdit{border-right: none;}"); does not work. We need to set border style, border width and border color. This code worked for me:

myLineEdit->setStyleSheet( "QLineEdit{ border-width: 1px; border-style: solid; border-color: black white black black; }" );
myPushButton->setStyleSheet( "QAbstractButton{ border-width: 1px; border-style: solid; border-color: black black black white; }" );

you can see border-style part here http://doc.qt.io/qt-5/stylesheet-reference.html

Show only left and right border

You can specify different colors or widths for top&bottom and left&right:

.warning-box {
    -fx-border-width: 4;
    -fx-border-color: transparent red transparent red;
    -fx-border-style: dashed;
}

.warning-box {
    -fx-border-width: 0 4 0 4;
    -fx-border-color: red;
    -fx-border-style: dashed;
}

If there are 4 space seperated values instead of a single one (for properties where this is applicable), the values are used for the top, right, bottom and left parts respectively.

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>

CSS create border on one side with sharp square edges

See if this works for you:

box-shadow: -10px 0 0 0 black;

Just that, no borders.

Skew div border of one side only using one div only

I believe this is what you want:

http://jsfiddle.net/5a7rhh0L/3/

CSS:

#a {
    position: relative;
    width: 120px;
    padding: 10px 20px;
    font-size: 20px;
    position: relative;

    color: #2E8DEF;
    background: #333333;
    border-bottom: 3px solid #2E8DEF;
}
#a:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;

    background: #333333;
    border-bottom: 3px solid #2E8DEF;
    border-right: 20px solid #2E8DEF;

    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}