CODEWITHSUNDEEP
css
Tristan de Jager
Tristan de Jager

Reputation: 115

CSS - Multiple border types in one line

Quick question, it might be stupid or easy. I don't know. That is why I'm asking.

Is it possible to call multiple border properties in one CSS line?

For example:

border-top, border-right: xxx;

Or even:

border-top,right,left: xxx;

I was curious about this.

Thanks

Upvotes: 0

Views: 3204

Answers (2)

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

It will be something like this:

.border {
  border-width: 1px 2px 3px 0;
  border-style: solid dotted dashed none;
  border-color: red blue green transparent;

  display: block;
  padding: 10px;
  text-align: center;
}
<div class="border">Mixed borders</div>

Upvotes: 3

Nick
Nick

Reputation: 3281

Sure, just like margin, padding etc, you can give 4 values (top,right,bottom,left) or 2 values (top&bottom, left&right)

div {
  height: 100px;
  width: 100px;
}
#a {
  border: 1px solid red;
}
#b {
  border-color: green;
  border-style: solid;
  border-width: 5px 3px 9px 0;
}
#c {
  border-color: tomato;
  border-style: solid;
  border-width: 15px 1px;
}
<div id="a"></div>
<br />
<div id="b"></div>
<br />
<div id="c"></div>

Upvotes: 0

Related Questions