How to Make Double Lines Border in CSS, Each Line in Different Color, Without Using Background Image

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/

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>

Possible to remove line between two borders

* {
  margin: 0;
}

body {
  background-color: #008284;
  font-family: "Poppins", sans-serif;
  color: white;
  text-align: center;
  background-image: url("desktop.jpg");
  background-repeat: no-repeat;
}

@font-face {
  font-family: Poppins;
  src: url(Poppins-Bold.ttf);
}

h1 {
  font-size: 6em;
}

h3 {
  margin-bottom: 20px;
}

a {
  font-size: 1.5em;
  color: white;
  text-decoration: none;
}

span {
  font-size: 1.5em;
}

.githubLogo {
  margin-top: 20px;
}

/*windows 95 window css */

button:focus {
  outline: none;
}

.box {
  width: 500px;
  background: #008284;
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%);
}

div.title {
  height: 18px;
  width: 100%;
  background: #000080;
  color: #fff;
  border: 3px #bec2c1 solid;
}

img.title {
  float: left;
}

p.title {
  margin: 2px 0 0 1px;
  float: left;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 11px;
}

.title button {
  margin: 2px 2px 2px 0;
  float: right;
  width: 20px;
  height: 13.5px;
  background: #c0c0c0;
  border-width: 1px;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 0;
  font-size: 9px;
  font-weight: bold;
  font-family: Tahoma;
  text-align: center;
}

div.body {
  padding: 13px 12px 12px;
  height: 100%;
  width: calc(100% - 34px);
  display: inline-block;
  border-bottom: 8px #bec2c1 solid;
  border-left: 8px #bec2c1 solid;
  border-right: 8px #bec2c1 solid;
  margin-top:-1px;
}

div.body p {
  font-family: "MS Sans Serif";
  font-size: 11px;
}

div.body button {
  font-family: "MS Sans Serif";
  font-size: 11px;
  outline: 1px solid #000000;
  background: #c0c0c0;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 4px 10px;
  margin: 20px auto 3px;
  display: block;
  position: relative;
  bottom: 0px;
}

<div class="box">
  <div class="title">
    <p class="title">Home</p>
    <button>X</button>
  </div>
  <div class="body">
    <div>
      <div>
        <h1></h1>
        <h3></h3>
      </div>
      <div></div>
    </div>
  </div>
</div>

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>

How to create double border which is not touching to edges in pure css?

Yes, it can easily be done using just CSS.

demo

HTML:

<ul class='navigation'>
    <li><a href='#'>nav item</a></li>
    <!-- as many navigation items as you would like -->
    <li><a href='#'>nav item</a></li>
</ul>

Relevant CSS:

.navigation { padding: 0; list-style: none; }
.navigation li {
    float: left;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    padding: .5em;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child a { border-left: none; }
.navigation li:last-child a { border-right: none; }

---

Alternatively, if you don't want to have a non-clickable area at the top and bottom, you could try it the other way:

demo

CSS:

.navigation {
    display: inline-block;
    overflow: hidden;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
    list-style: none;
}
.navigation li {
    float: left;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
}
.navigation a {
    display: block;
    padding: .5em;
    margin: -.35em 0;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child { border-left: none; }
.navigation li:last-child { border-right: none; }

---

A third way to do this, also extending the clickable area to the borders as well would be to use pseudo-elements on the links to get the lateral borders.

demo

CSS:

.navigation { margin-top: 7em; list-style: none; }
.navigation li {
    float: left;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    position: relative;
    padding: .85em;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    color: #000;
    text-decoration: none;
}
.navigation a:before {
    position: absolute;
    top: .35em; bottom: .35em; left: 0;
    border-right: solid 1px #fff;
    border-left: solid 1px #a4a4e3;
    content: '';
}
.navigation li:first-child a:before { border: none; }

Border radius rounded for two lines of text

.background {
  background-color: black;
  padding: 5rem;
}

span {
  display: inline-block;
  color: white;
  background: #ED242E;
  border-radius: 5px;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 15px;
  color: white;
  font-size: 21px;
  text-transform: uppercase;
  font-weight: 700;
}

.background span:first-child {
  border-bottom-left-radius: 0;
}

.background span:last-child{
  border-top-right-radius: 0;
  border-top-left-radius: 0
}

<div class="background">
  <div>
    <span>This is text This is text This is Text</span> <br> <span>This is text This is text </span>
  </div>
</div>

Multiple border color with CSS

Here is a snippet which shows you how to work with the ::before and ::after pseudo-elements.

body {  margin: 2em;}
.TopBorder {  border-top: 2px solid #36db8b;  position: relative;}
.TopBorder::after {  position: absolute;  left: 50%;  right: 0;  top: -2px;  border-top: 2px solid #cccccc;  content: '';}

<div class="TopBorder ">
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris  placerat eleifend leo.
</div>

---

Related Topics