Border Vs. Border-Width

HTML & CSS
1

In the following code, if there is both border and border-width, than border-width controls the width. Border controls the width when there is no border-width. Is this normal, maybe it is set so if the border-width doesn’t work in a browser there is a backup style? Oh, if there is no border, than it doesn’t display at all.

.borderimg { 
    width:100px;
    height:300px;
    border: 35px solid red;
    border-image: url(border.png) round;
    border-image-slice: 30;
    border-width:40px;
 }

Thanks!

1 Like
2

The “border” property is just a shorthand to declare border-color, style and width in one line. If you set the width twice, as you have in your example, then the second one overrides the first one.

There are many similar shorthands to simplify what would otherwise be more verbose than css already is :slight_smile:

3 Likes
3

Not exactly. :).

A border will only show when border-style has been set otherwise the default is none and border-width or border-color will not be seen.

In your example you don’t need the extra border-width property as you could set it in the shorthand.

border:45px solid red

2 Likes
4

Sure enough, thanks, you were right.

1 Like
5

border-width: 5px; It will assign border-width shorthand CSS property and sets the widths of all four sides of an element’s border . But it will not work without border-style , as per w3schools

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.