CSS Border Shorthand When Each Border Has a Different Width

CSS border shorthand when each border has a different width

Use

border: solid black;
border-width: 1px 2px 3px 4px;

Two different width borders on 3 sides

Why not remove the outline and instead create a nested element inside of the element?

You can do like this:

Create nested elements in HTML:

<div class="big">
        <div class="small">Some text Here.....</div>
</div>

Then apply CSS:

.big{
      border: 5px solid green;
      border-bottom: none;
    }
.small{
        border: 2px solid black;
        border-bottom: none;
        margin: 2px;
    }

No need to use the outline.

Shorthand for CSS border rule

Unfortunately there is no shorthand for the border / border-wdith property if you don't set equals border width for all sides.

(See CSS border shorthand when each border has a different width)

Example for equals border width :

div.container {
  border: 5px solid gray;
}

or with different border width (your case)

div.container {
  border: 0 solid gray;
  border-width: 5px 2px;
}

Can I set the CSS border width for three borders with shorthand?

If you use shorthand, you must set all of the widths, so you won't be able to use the width applied from the .message class.

.test { border-width: 1px 0 0 0 } /* top right bottom left */

Is it alright to change the CSS border shorthand syntax order?

If you check the formal syntax you have:

<line-width> || <line-style> || <color>

and || (double bar) means:

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

So you can use any order you want and you will not face any issue with any browser since it's defined like that. If a browser doesn't accept an order then it's for sure a bug or you are considering some invalid values.

---

From the specification we also have the same definition including the inherit value

[ <border-width> || <border-style> || <'border-top-color'> ] | inherit

You have 6 different ways to define border:

.box {  padding:5px;  margin:5px;}

<div class="box" style="border:1px solid red;"></div><div class="box" style="border:1px red solid;"></div><div class="box" style="border:solid 1px red;"></div><div class="box" style="border:solid red 1px;"></div><div class="box" style="border:red 1px solid;"></div><div class="box" style="border:red solid 1px;"></div>

CSS border-spacing property shorthand

This is a little different because unlike things such as border-width or margin, only two values are accepted:

border-width: 10px 50px 10px 50px; /* valid */
border-spacing: 10px 50px 10px 50px; /* invalid */

You can probably chalk it up to this difference.

Whenever you see this shorthand for other properties that accept (up to) 4 values:

border-width: 10px 50px;

It just means that the bottom and left values are copied from the other side:

border-width: 10px 50px 10px 50px;
/*            top  right btm left    */

Or with three values:

border-width: 10px 50px 20px;

This is equal to:

border-width: 10px 50px 20px 50px;

Shorthand for border properties?

Nope, you can't make it any shorter than the examples you've provided.

From the docs

Unlike the shorthand ‘margin’ and ‘padding’ properties, the ‘border’
property cannot set different values on the four borders. To do so,
one or more of the other border properties must be used.

_{Thanks @Rocket}

---

If you are using a preprocessor (like SCSS), you could try and use a mixin, but I hardly believe that's what you want:

@mixin border_shorthand(
$top_width, $top_color, $top_style,
$left_width, $left_color, $left_style,
$bottom_width, $bottom_color, $bottom_style,
$right_width, $right_color, $right_style) {
  border-top: $top_width $top_color $top_style;
  border-left: $left_width $left_color $left_style;
  border-bottom: $bottom_width $bottom_color $bottom_style;
  border-right: $right_width $right_color $right_style;
}

.element {
  @include border_shorthand(1px, black, solid, 2px, red, solid, 3px, green, solid, 4px, blue, solid);
}

Which outputs:

.element {
  border-top: 1px black solid;
  border-left: 2px red solid;
  border-bottom: 3px green solid;
  border-right: 4px blue solid; }

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

Difference between border and border-width attributes in CSS styling

When you use :

border: 5px;

Then you have to use 3 shorthand property with it:

border-width
border-style (required)
border-color

When you use the only width it will not work, you have to also write border-style, and If you write the only style of Border then it works with default width and default color as the text color.

And When you use:

border-width: 5px;

It will assign border-width shorthand CSS property and sets the widths of all four sides of an element's border.

---

Related Topics