CODEWITHSUNDEEP
htmlcss
Pacerier
Pacerier

Reputation: 89713

Is there a short-hand for setting a different color / style / width to each side of the CSS border?

I want to set a different color / style / width to each side of the CSS border.

Is there a short-hand for that?

Upvotes: 1

Views: 142

Answers (3)

spliter
spliter

Reputation: 12579

No, the shortcut is just for one border. There is no way you can fit width, style and color in one shortcut for all borders if those borders differ. Would be nice to have something like 

border: 1px solid Red, 2px solid Green, 2px solid darkgeen, 1px solid Pink;

but it's not the case. For the example above you will have to do something like:

border: 1px solid Red;
border-right: 2px solid Green;
border-bottom: 2px solid darkgreen;
border-left-color: Pink;

Upvotes: 1

Bojangles
Bojangles

Reputation: 101513

The closest you can get is doing this:

selector
{
    border-width: 1px 2px 3px 4px;
    border-style: solid;
    border-color: #f00 #0f0 #00f #f0f
}

Although if you've got a mostly uniform border with one side different, for example, I'd go with daveoncode's answer.

Upvotes: 4

daveoncode
daveoncode

Reputation: 19598

You have to declare each single border:

.my-box {
  border-top: 1px solid red;
  border-left: 3px dashed black;
  border-right: 2px dotted violet;
  border-bottom: 1px solid #cccccc;
}

If you want you can override just the borders with the different style:

.my-box {
  border: 1px solid red;
  border-right: 2px dotted violet;
}

Upvotes: 6

Related Questions