while looking at the border property w3c specs, trying to determine what {1,4} means? is it width? I believe width can't be restricted between 1-4, so what is it?
[ thin | medium | thick | <length> ]{1,4} | inherit
It means that you can set there between 1 and 4 values.
Examples
border: 1px = border: 1px 1px = border: 1px 1px 1px = border: 1px 1px 1px 1px
border: 1px 2px = border: 1px 2px 1px = border: 1px 2px 1px 2px
border: 1px 2px 3px = border: 1px 2px 3px 2px
border: 1px 2px 3px 4px
// values behind "=" are equivalent, you can choose what is better for you.
Values order
Order of values is: top - right - bottom - left
General Info
When you set only one value, it means: "set this border to all sides"
When you set two values, the first one is border-top and bottom, the second one is for border-left and right.
When you set three values, the first one is for top, the second one for right and left, the third one for bottom.
When you set all values, it´s top-right-bottom-left.
I only refers to syntax. From the Mozilla Developer Network:
Formal syntax: {1,4}
border-width: width /* One-value syntax */
border-width: horizontal vertical /* Two-value syntax */
border-width: top horizontal bottom /* Three-value syntax */
border-width: top right bottom left /* Four-value syntax */
So you can define border-width using 1, 2, 3, or 4 values. If you use:
(One value) It applies to all sides.
(Two values) The first value is applied to the horizontal (i.e. top and bottom), and the second to the vertical (i.e. left and right)
...and so on.
A lot of CSS properties inherit a similar pattern, such as the shorcut for padding, margin, etc.
You can either specify one border property for the entire element or four separate borders for left, right, top and bottom of the element.
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Another example is given in the specs of border-style property:
#xy34 { border-style: solid dotted }
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.
{1-4} means that you can specify 1, 2, 3 or 4 values or the property.
The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
Related
Observe the below simple example:
div {
border-bottom: 1px solid black;
border-radius: 20%;
padding: 10px;
}
<div>Test</div>
In Safari, this causes part of the upper borders to be drawn:
I don't want those "ghosted" upper borders. How do I compensate for this?
You need to remove the rounded border on the top side of your div like so:
div {
border-bottom: 1px solid black;
border-radius: 0 0 20% 20%;
padding: 10px;
}
This is using the border-radius shorthand with 4 values where
first value applies to top-left, second value applies to top-right,
third value applies to bottom-right, and fourth value applies to
bottom-left corner"
https://www.w3schools.com/cssref/css3_pr_border-radius.asp
I would like to bold the border of a div.
My problem is that i need to bold only the top and bottom borders.
For example: if i have a div as a shape of a square it should look:
_______________
_______________
How can i do it in css?
In CSS
border-top:3px solid #000;
border-bottom:3px solid #000;
and then if you want borders on left and right just make them 1 px instead of 3
Set the width of the bottom and top borders higher.
#element {
border-top: 5px solid #000;
border-bottom: 5px solid #000;
}
Try:
border: 2px 0px 2px 0px #000;
Edit:
Quick explanation of border shorthand properties. The order of elements is width style color, where the width is in the order of Top Left Bottom Right. So in the above example it will set the top and bottom borders to 2px with the left and right being 0px. It will default the style of the border to solid and the color will be black. To create a dashed border on the left and right instead you would use:
border: 0px 2px 0px 2px dashed #000;
You can do it with:
border-top: 1px solid black;
border-bottom: 1px solid black;
Try something like:
border-top: 2px solid black;
border-bottom: 2px solid black;
For more info, see https://developer.mozilla.org/en-US/docs/CSS/border-top and https://developer.mozilla.org/en-US/docs/CSS/border-bottom.
Guys I do have two very simple CSS doing same thing(creating a triangle), i Need your suggestion which one is better.
Example 1
.leftArrow {
border-right: 5px solid #000;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
height:0px;
width: 0px;
}
In example above, i am trying to define border for right, bottom, and top separately. Now the problem is if i do need to change border from 5px to 10px. I need to make changes in 3 declaration.
So it's not good to make change every time in 3 declaration for a single change. Suppose i do have arrow for all(four) direction. In that case i do need to make change in 4 X 3 = 12 declaration.
It's very time consuming :(
Example 2
.leftArrow {
border: 5px solid transparent;
border-left-width: 0px;
border-right-color: #000;
height:0px;
width: 0px;
}
In second example I'm defining border or all sides in first declaration "border: 5px solid transparent;". In second declaration i am replacing left border width from 5px to 0px. and in third declaration replacing right border color from transparent to black.
Now in my opening it's also not a good idea to define border width in first declaration and then change it in second.
Same situation for third declaration. I'm changing border color from transparent to black.
Please give me your opinion for this type of situation or if you do have any better idea :)
Use http://sass-lang.com/ with variables.
If I understood you right, you're problem is, that you don't wanna change the same things over and over again?
Then Less CSS could be something for you, it also allows you to e.g. nest your CSS, the best thing is, you can either compile the Less CSS to "real" CSS or include the less.js and you don't have to compile it (but I recommend the first, so it will also work with browsers, which have JS disabled).
I'd do it like this:
border: 5px solid #000; /* Set base style */
border-width: 5px 5px 5px 0px; /* All 5px except left */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
The first line sets a "base" style that is overridden by the next two border- properties. You can use border-width and border-color to set different colours and widths for each of the four sides of the element.
The border-color property above sets the left colour to transparent, but because the left border-width is 0, it doesn't have any effect.
To make things even easier to change, do this:
border: 5px solid #000; /* Set base style */
border-left: none; /* Get rid of left border */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
Now all you need to change is the first border property. The border-left: none takes care of making sure the left border never shows. You don't have to change
This is pretty much as simple as LESS or alternatives, and sticks to pure CSS.
I'm having trouble visualizing what your are trying to do, but if I understood you correctly, you could do something like this to reduce code rewriting:
Define common arrow properties
.arrow {
border: 5px solid;
color: #000;
height: 0px;
width: 0px;
}
And then turn off the borders where needed
Show the left and bottom border only on the left arrow
.arrow.left {
border-right-color: transparent;
border-top-color: transparent;
}
That way you keep the basic styling in the .arrow block.
I would do it like this:
<div class="arrow arrow-left"></div>
.arrow {
border:5px solid #000;
width:0;
height:0;
}
.arrow-left {
border-left:0;
border-bottom-color:transparent;
border-top-color:transparent;
}
http://jsfiddle.net/pdRYE/15/
In this case you have only one border-width declaration and you are using the second class only to hide the border you don't need.
I am using CSS3 property
box-shadow: 2px 2px 2px 2px #CCCCCC;
Its giving this wierd effect on the right hand side and the bottom.
How to make the shadow to be equal on all the sides ?
Use
box-shadow: 0 0 2px 2px #CCCCCC;
instead
See this jsFiddle
The first two numeric values specify the relative x and y offset of the shadow. Hence your shadow was displaced/offset by a vector of (2px , 2px), or 2px right, and 2px down.
The third numeric value specifies the blur, and the fourth the shadow size/spread, and the fifth the colour (in HEX)
Use this:
box-shadow: 0px 0px 2px 2px #CCCCCC; /* Horizontal Length: px, Vertical Length: px, Blur Radius: px, Spread: px, Color */
You can test CSS3 here: http://css3generator.com/
box-shadow is defined as: horizontal offset - vertical offset - shadow spread - blur size - color
You could just do: box-shadow: 0 0 2px 2px #ccc;
You can do this by setting the first 2 values to 0px:
box-shadow: 0px 0px 2px 2px #CCCCCC;
See more: w3schools
I am creating a menu with 4 different color borders. When viewed in Safari 5, the left and right borders go from top to bottom with no angles around the box. When viewed in FF 4, there is a border angle at the border-bottom and border-right elements. This makes the menu look different in different browsers. Here is the CSS for the menu item:
ul#mainnav a {
display: block;
text-decoration: none;
color: #b0c9da;
padding: 7px 7px 7px 14px;
border-bottom: 1px solid #01304f;
border-top: 1px solid #1a74af;
border-right: 1px solid #fff;
border-left: 1px solid #246792; }
Please advise. Thanks
This is caused by the browsers' determination of where to begin the border line and where to end it. Unfortunately there is no fix for this. Your best bet is to pick border colors that are similar enough that they will not stand out so tremendously.
Another option, requiring modern browsers / CSS3 support, would be to use a box-shadow on the element. For example:
box-shadow: inset 1px 1px 1px rgba(255,0,0,1),
inset 1px -1px 1px rgba(0,255,0,1);
You can add multiple layers of box shadows of only 1px width, and specify the direction that they "drop". Could be fun to play with.