I have this working css but I like to make it into one line, is it possible?
border-radius: 0;
border-color: #ccc;
border-width: 0 0 2px 0;
border-style: none none solid none;
This short article covers the various bits of CSS shorthand you'll encounter in your day to day work.
https://www.w3.org/community/webed/wiki/CSS_shorthand_reference
Border
border allows you to set border width, style and, color.
UPDATE:
As #torazaburo pointed out it actually requires border: 0 none #ccc for it to be correct as well as adding border-radius: 0 as it's not part of the border shorthand.
#example {
border: 0 none #ccc;
border-bottom: 2px solid #ccc;
border-radius: 0;
}
If it's not an issue that the following could take non-bottom border width and style from other rules in the cascade then this should be fine:
#example {
border-bottom: 2px solid #ccc;
}
Produces the same CSS that you're wanting:
https://jsfiddle.net/betg5xue/5/
If you simply try to do
border-bottom: 2px solid #ccc;
it could possibly take non-bottom border width and style from other rules in the cascade. If that's not an issue, then the above would be fine.
The only reliable way that is identical to what you proposed involves three lines, there's no way around it:
#example {
border: 0 none #ccc;
border-bottom: 2px solid #ccc;
border-radius: 0;
}
Unfortunately, it is necessary to repeat the #ccc in the border-bottom property because if omitted it does not take the value from the cascade; instead it takes currentColor. It is necessary to specify border-radius as a separate property because it is not part of the border shorthand.
Related
I'm learning CSS online and the above code was perfectly working when he used it. But when I did the same, browser markedenter code here it as an invalid property value. Moreover the border-bottom makes the hr entirely gray in color(the above mentioned code in rgba is for gray color) overriding the border-top and the default color of hr
hr
{
width: 400px;
border-top: 1PX solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);}
}
Remove one } from the end , it should works perfectly ;
hr
{
width: 400px;
border-top: 1PX solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
Try formatting you css file every moment to not have this problem again.
I'm trying to add a red 2px border when a customer hovers over one of my three 'service widgets' on my website https://tomnicholls.co on the homepage. I can't figure out where to apply the code as I can't find a container? I can't even seem to add a regular border never mind a border on :hover.
I have tried applying code to .col-link & .col-link .custom-link and have also tried giving the column a class and applying code to that as well as giving the actual content block a class (btn-widget) and applying css to that but nothing seems to be working.
.btn-widget {
width: 328px !important;
margin-left: 72px !important;
border-left: 2px !important;
border-right: 2px !important;
border-top: 2px !important;
border-bottom: 2px !important;
border-color: #c92228 !important;
z-index: 1000;
color: #000000 !important;
}
I would like to solve the problem and have a border on hover
It worked with this :
a.col-link.custom-link:hover {
border: 2px solid red;
}
I have this rule here:
border: 3px 0 0 0 solid #ccc;
Yet, it appears that the 4 sides are of the border are not registering.
border: 3px solid #ccc;
seems to work fine however.
Is there a way to make a one-liner with 4 side widths assigned?
Though, there is no exact shorthand for the border, you can still put the width of the border in the same line;
border-width: 1px 0 1px 0;
border-color: red;
border-style: solid;
Hope it helps.
If I'm not mistaken, this is the closest you can get to one line:
border: solid #000;
border-width: 0 1px 1px 0;
The border shorthand always sets equal width border on all sides; your first declaration is invalid.
You can use a one-liner, though:
border: 0 solid #ccc; border-top-width: 3px;
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.
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)