Menu
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;
870
You'd use the <hr> tag.
The border shorthand CSS property sets an element's border. It sets the values of border-width , border-style , and border-color .
SVG elements have the stroke-dasharray property, which can be used to make custom borders like that (in an svg). you can then use it as a background image in your html, and it will scale to fill whatever container you put it in.
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/
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
