How to have double layer border

newcoder1010 · September 15, 2016

Hi,

I have this css:

border: 10px solid white;

I like to put 1 px red color border on top of it. HOw can I do it?

Ingolme · September 15, 2016

You can have a double border of the same color by setting the border style to "double" but if you want multiple borders with different styles and colors you will need multiple nested elements, each with their own border.

dsonesuk · September 16, 2016

Depends in what context the border is applied, to void element such as img element, or element that has content.

Taken from w3schools border example using latter (p.one) you can use content:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #ccc;}
p.one {
    border: 10px solid white;position: relative;
}
p.one:before{content:"";border: 1px solid red; position: absolute; top: -10px; left:-10px; right: -10px; bottom:-10px;}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: double;
    border-width: 15px;
}

p.six {
    border-style: double;
    border-width: thick;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>

Sign In

How to have double layer border

Recommended Posts

newcoder1010

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity