CODEWITHSUNDEEP
css
Pieter
Pieter

Reputation: 32785

Can I set border-left and border-right simultaneously?

Sometimes I find myself in a situation where I want to define a border rule for the left and right side of an element. But honestly, border-left: solid 1px #999; border-right: solid 1px #999 is little clumsy. It wastes space, I have to apply changes twice and it may or may not be rendered less efficiently.

Is there a way to define horizontal borders or vertical borders in one go?

Upvotes: 1

Views: 2661

Answers (3)

Kyle
Kyle

Reputation: 67204

You can do it in one go like this:

#myDiv
{
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    border-width: 0 1px; /*horizontal, vertical*/
}​​​​​​

http://jsfiddle.net/52AEP/

Upvotes: 3

Priyank Patel
Priyank Patel

Reputation: 6996

<div id="myDiv">Your Div</div>

CSS:

#myDiv
{
border-width:0 1px 0 1px;
border-color:#ddd;
}

Upvotes: 6

ziesemer
ziesemer

Reputation: 28697

No.

From https://developer.mozilla.org/en-US/docs/CSS/border:

While the border-width, border-style, and border-color properties and even the margin and padding shorthand properties accept up to four values, allowing to set different width, style or color, for the different border, this property only accepts one value for each property, leading to the same border for the four edges.

So you could switch to using separate border-width, border-style, and border-color properties, using their shorthand properties to set per-side styles - but I think you're best off as you have it.

That said, ensure that you're saving your style definition as a CSS class - that can then be re-used across elements, rather than applying these one-by-one in "style" attributes on elements throughout your page.

Upvotes: 0

Related Questions