In CSS I have found that omitting border-style did not matter when coding as:
input{
/*here border style is not mentioned*/
border-width: 3px;
border-color: red;
}
The border was still appearing in this case. However border would not appear if coded as below:
input{
border: 3px red; /*here border style is not mentioned*/
}
I also tested on w3school editors please see the screen shots with border style removed. Why is border appearing in the 3rd screenshot?
What am I missing?
https://www.w3schools.com/css/tryit.asp?filename=trycss_border-color1
https://imgur.com/xgTVpmN
https://www.w3schools.com/css/tryit.asp?filename=trycss_border
https://imgur.com/b7blLMH
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_focus2
https://imgur.com/1wxD5OG
The input elements have a default border definition so when you overwrite each property like in the first example you still see it because you aren't changing the style but with the shorthand you are overwriting the entire default value, and if you don't set any value for style on the shorthand it will take the initial value of the property that in this case is none.
The border CSS property is a shorthand property for setting all individual border property values at once: border-width, border-style, and border-color. As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value.
&
Note: The default value of border-style is none.
From MDN Source
Related
I'm trying to style angular material's input to look the same as all inputs in this app.
Is it possible to adjust the thickness of the schedule's input outline to have the same width as the project's input border?
The classes to override are:
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-end,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-gap {
border-width: 1px !important;
}
Make sure you use border-width and not border
Have you tried editing the width of the schedule input itself?
If simply nothing changes maybe try to add the !important tag to css to overwrite the width given (and match the other input ones).
I was reading this question on disabling the dashed borders around <a> links. Some answers used outline: none, while some used outline: 0
Is there any difference between using outline: none and outline: 0?
According to MDN:
The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration
So when you set outline to none or 0, you are actually telling the browser to set 3 properties (outline-style, outline-width and outline-color)
I used Firefox Developer Tools to find out the difference:
As you can see, they both use the default text color as the outline-color, and they both have outline-style set to none. The only difference is the outline-width:
When the outline is 0, the outline-width is 0px
When the outline is none, the outline-width is medium
That is the only difference between the two. You can use either one, they will both display the same way (since the outline-style is none, it does not matter how wide the outline is).
Is it normal that a border color would be inherited from font's color property? I was surprised to find that:
div
{
border: 4px solid;
color: red;
height: 100px;
width: 100px;
}
<div></div>
JSBIN
gives me a div with a red border. Usually not specifying a color will default to black. What is this odd inheritance?
Based on section 4.1 of the relevant Backgrounds and Borders Module spec, the initial border-color value is currentColor:
CSS Color Module - 4.4. currentColor color keyword
CSS1 and CSS2 defined the initial value of the border-color property to be the value of the color property but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the currentColor value for the fill, stroke, stop-color, flood-color, and lighting-color properties.
CSS3 extends the color value to include the currentColor keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.
In other words, the value is treated as the following in your case:
border: 4px solid currentColor;
Therefore you could also use the currentColor value for something such as the background-color property. For instance:
div {
color: red;
width: 100px;
height: 100px;
border: 4px solid;
background-color: currentColor;
}
<div></div>
Small fun fact, if you change the font color (e.g. :hover), the bordercolor changes with it! It also works well with transitions!
In CSS, an element can have one of two "primary" colors: a foreground color, specified by the color property, and a background color, specified by the background-color property. Lots of other properties accept a color, but having black as the initial color value would be very arbitrary, so instead properties that accept a color value take on the computed foreground color by default.
Of course, this can result in a black border if the foreground color is black, but only then. And the text color is only black to start with because the default UA stylesheets make it so; CSS does not state anywhere that the initial value should be black, but that it is UA-dependent (CSS1, CSS2.1, CSS Color 3). For example, a UA in high-contrast mode or inverted-colors mode could specify the default color scheme to be white on black, or a different color combination entirely:
This behavior has been around since CSS1. The currentColor value, introduced in CSS Color 3 based on the equivalent SVG keyword, is now listed as the initial value of the respective properties in the respective CSS3 modules:
border-color
outline-color1
box-shadow
Using attr() with a color value also falls back to currentColor when a value cannot be found. See CSS Values 3.
Prior to CSS3 there was no way to restore the color of a border or outline to the computed foreground color once overridden; see my answer to this related question. While this question uses the word "inherit", it should be noted that specifying border-color: inherit does not inherit from the color property — like all other CSS properties, it inherits from the border-color of the parent element.
1 The default is actually to invert the colors of the pixels underneath the outline, but supporting invert is not mandatory and if a browser chooses not to, the foreground color must be used instead.
I've always used the notation border: 0 none, presumably that means border-width: 0 and border-style: none.
Does anybody else use write it this way? Is it really necessary to declare both style and width for safe removal?
border:none; should achieve the same effect according to the spec.
The border property can be set with the following values:
<line-width> || <line-style> || <color>
When one of these values is omitted its value is set to its initial value. So border:none; will actually have the initial line-width value added:
border: medium none;
However, the line-style value of none will cause the color and width values to be ignored as stated in the CSS Specification:
‘none’
No border. Color and width are ignored (i.e., the border has width 0).
Just having border: none; or border: 0; is enough. You can find more information about the border shorthand here.
Is there a way to set the border-color in CSS to be the same as the text color?
For instance having a class which adds a bottom dotted border, but leaving the color of said border to match the color of the text in much the same way as the color of text-decoration:underline is the color of the text (color property)?
You actually get this behavior for free; it's mentioned in the spec:
If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.
So all you have to do is omit the color when using the border shorthand property:
.dotted-underline {
border-bottom: dotted 1px;
}
Or only use the border-style and border-width properties, and not border-color:
.dotted-underline {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
Or, in browsers that support the new CSS3 keyword currentColor, specify that as the value for border-color (useful for overriding existing border-color declarations):
.dotted-underline {
border-bottom-color: currentColor;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
The color that the border takes on will be the same as the text color by default.
This:
border-bottom: 1px dotted currentColor;
From the spec:
currentColor
The value of the ‘color’ property. The computed value of the ‘currentColor’ keyword is the computed value of the ‘color’ property.
If the ‘currentColor’ keyword is set on the ‘color’ property itself,
it is treated as ‘color: inherit’.
See here: http://www.w3.org/TR/css3-color/#currentcolor
(doesn't work in IE8 though)
Update: So, it seems that explicitly setting the color value is not necessary, since the default value already is the value of the color property.
So, this works just fine:
border-bottom: 1px solid;
You will have to set these to be the same color yourself.
If you want your CSS to be more programmatic and DRY, you should use something like LESS. It can save you a lot of work, so you only have to declare that color once.