CODEWITHSUNDEEP
cssborder
hrsetyono
hrsetyono

Reputation: 4464

CSS Full Border top?

my div has different border-top color than its left and right border.

Example:

div{
    width: 100px; height: 100px;
    border-top: blue 20px solid;
    border-left: red 20px solid;
    border-right: red 20px solid;
}

But the corner of the border become tringle-shaped as shown in left-image below:

CSS Border Problem

I want the border-top to span full width like the right-image above.

Any trick to solve this?

Thanks

Upvotes: 1

Views: 739

Answers (1)

aorcsik
aorcsik

Reputation: 15552

This would gove you the desired result:

HTML

<div id="a"><div id="b"></div></div>

CSS

div#a {
    border-top: blue 20px solid;
    width: 140px;
}
div#b {
    height: 100px;
    border-left: red 20px solid;
    border-right: red 20px solid;
}

Upvotes: 2

Related Questions