CSS Double Border (2 Colors) Without Using Outline

Double border with different color

Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:

body {  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);  background-repeat: no-repeat;  height: 100vh;}.double-border {  background-color: #ccc;  border: 4px solid #fff;  padding: 2em;  width: 16em;  height: 16em;  position: relative;  margin: 0 auto;}.double-border:before {  background: none;  border: 4px solid #fff;  content: "";  display: block;  position: absolute;  top: 4px;  left: 4px;  right: 4px;  bottom: 4px;  pointer-events: none;}

<div class="double-border">  <!-- Content --></div>

CSS double border (2 colors) without using outline?

You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1.
I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.

.border
{
    border:2px solid #36F; 
    position:relative;
    z-index:10
}

.border:before 
{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border:2px solid #36F
}

http://jsfiddle.net/fvHJq/1/

Is there is a possible way to fill color between css double border?

You could also use multiple box-shadows:

#element {  width: 100px;  height: 100px;  box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;}

<div id="element"></div>

How to make double lines border in CSS, each line in different color, without using background image?

I just found the way on google search and it's working good for me.

h2 {
    border-bottom: 1px solid blue;
    box-shadow: 0 1px 0 red;}

Source : http://www.cvwdesign.com/txp/article/425/useful-tip-for-creating-double-borders-with-css3

Edit : I found another way to achieve multiple border using CSS 2.1 pseudo-elements

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Adding a double border to a linear-gradient-filled-div colors the border too

You can manipulate box-shadow property... you can have more than one!

.colors {  width: 100px;  padding: 10px;  height: 50px;  background: linear-gradient(white, orange);  box-shadow:    inset 0 0 0 2px black,    inset 0 0 0 8px white,    inset 0 0 0 10px black;}

<div class="colors"></div>

Preventing double borders in CSS

#divNumberOne { border-right: 0; }

How to create multi-color border with CSS?

You can do it with :after or :before psuedo element and css linear-gradient as shown below:

body {  background: #ccc;}
.box {  text-align: center;  position: relative;  line-height: 100px;  background: #fff;  height: 100px;  width: 300px;}
.box:after {  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);  position: absolute;  content: '';  height: 4px;  right: 0;  left: 0;  top: 0;}

<div class="box">Div</div>

Circle with two borders

I'd suggest, with the following HTML:

<div></div>

The CSS:

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}

div {  width: 20em;  height: 20em;  border-radius: 50%;  background-color: red;  border: 4px solid #fff;  box-shadow: 0 0 0 5px red;}

<div></div>

---

Related Topics