CODEWITHSUNDEEP
htmlcss
hsw4840
hsw4840

Reputation: 231

How to use Two border color using CSS

Firstly, I'm not good at English. Sorry T.T;;

I want to make a box like this, which has a border with two colors. I've been trying to make it using CSS border-color, but I cannot implement it. I hope to know any idea for this.

I do not want to have a duplicated div. I want to use CSS only.

How can I design this using CSS ? pls T.T;;

This is what I have so far:

#box{
	margin-top:10px;
	width: 950px;
	height:100px;
	border:5px solid #f3f3f3;
	padding: 5px;
}
<div id="box">

</div>

Regards,

Upvotes: 1

Views: 82

Answers (1)

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

What you are looking for is the CSS3 box-shadow.

#box{
margin-top:10px;
width: 950px;
height:100px;
border:5px solid #f3f3f3;
padding: 5px;
box-shadow: 0px 0px 0px 2px #ddd;
}
<div id="box">
</div>

When you apply the box-shadow with a 0px value for the x-offset and y-offset, you get the shadow on all four sides. Furthermore with a 0px value for the blur, it ultimately looks like a border with two colors.

Upvotes: 3

Related Questions