CODEWITHSUNDEEP
jquerycsscolorsborder
leora
leora

Reputation: 196499

Is there anyway to have multiple colors for a top border in css?

I have a table cell and right now I have:

  #myCell
  {
      border-top: 1px solid brown;
  }

and I wanted to see if there is anyway to have multiple colors broken up by percentage. For example, something where the left 1/2 of the top border is brown but the right 1/2 of the top border is green.

Is this possible in css or javascript / jquery.

The only idea I had was to create a table inside my cell with multiple columns (and have each column top-border have a different color) but I wanted to see if there was a more elegant way without having to generate a separate table within each of my table cells.

Upvotes: 1

Views: 107

Answers (5)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you can use pseudo element :before and :after for giving border

div {
  padding: 10px;
  position: relative;
  display: inline-block;
}
div:after,
div:before {
  content: '';
  position: absolute;
  top: 0px;
  height: 4px;
  width: 50%;
}
div:after {
  background: red;
  left: 0;
}
div:before {
  background: green;
  right: 0;
}
<div>testing testing testing</div>

if you want to give full border

div {
  padding: 10px;
  position: relative;
  display: inline-block;
}
div:after,
div:before {
  content: '';
  position: absolute;
  top: 0px;
  height: 100%;
  width: 50%;
  border-style: solid;
  box-sizing: border-box;
}
div:after {
  border-width: 4px 0px 4px 4px;
  border-color: red;
  left: 0;
}
div:before {
  border-color: green;
  right: 0;
  border-width: 4px 4px 4px 0px;
}
<div>testing testing testing</div>

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

You could use :after :pseudo-element instead of borders and use JavaScript to set the width, height, left and bottom properties of the :after :pseudo-element according to the width of the content.

You could set the border-width through the variable borderWidth(It is currently set to 3).

Example-1: Border with two solid colors around dynamic content

var ss = document.styleSheets;
var borderWidth = 3;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "div::after" || r.selectorText == "div:after") {
      var w = document.getElementsByTagName('span')[0].offsetWidth + (borderWidth * 2);
      var h = document.getElementsByTagName('span')[0].offsetHeight + (borderWidth * 2);
      r.style.width = w + 'px';
      r.style.height = h + 'px';
      r.style.left = -borderWidth + 'px';
      r.style.bottom = -borderWidth + 'px';
      r.style.background = 'linear-gradient( to right, brown, brown ' + (w/2) + 'px, green ' + (w/2) + 'px, green ' + w + 'px)';
      // workaround for Chrome so that it doesn't render it with odd borders
      if (navigator.userAgent.indexOf('Chrome') > -1 && borderWidth > 1) {
        r.style.bottom = -borderWidth + 0.5 + 'px';
      }
    }
    if (r.selectorText == "div") {
      var w = document.getElementsByTagName('span')[0].offsetWidth;
      r.style.width = w + 'px';
    }
  }
}
div {
  position: relative;
  margin: 15px;
}
div:after {
  content: '';
  position: absolute;
  z-index: -1;
}
span {
  background: white;
}
<div><span>This is some dynamic text</span></div>

Example-2: Border with more than two solid colors around dynamic content

var ss = document.styleSheets;
var borderWidth = 3;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "div::after" || r.selectorText == "div:after") {
      var w = document.getElementsByTagName('span')[0].offsetWidth + (borderWidth * 2);
      var h = document.getElementsByTagName('span')[0].offsetHeight + (borderWidth * 2);
      r.style.width = w + 'px';
      r.style.height = h + 'px';
      r.style.left = -borderWidth + 'px';
      r.style.bottom = -borderWidth + 'px';
      r.style.background = 'linear-gradient( to right, brown, brown ' + (w/4) + 'px, green ' + (w/4) + 'px, green ' + (w/4) * 2 + 'px, cadetblue ' + (w/4) * 2 + 'px, cadetblue ' + (w/4) * 3 + 'px, darkolivegreen ' + (w/4) * 3 + 'px)'
      // workaround for Chrome so that it doesn't render it with odd borders
      if (navigator.userAgent.indexOf('Chrome') > -1 && borderWidth > 1) {
        r.style.bottom = -borderWidth + 0.5 + 'px';
      }
    }
    if (r.selectorText == "div") {
      var w = document.getElementsByTagName('span')[0].offsetWidth;
      r.style.width = w + 'px';
    }
  }
}
div {
  position: relative;
  margin: 15px;
}
div:after {
  content: '';
  position: absolute;
  z-index: -1;
}
span {
  background: white;
}
<div><span>This is some text which is ofcourse dynamic</span></div>

Example-3: Incrementing border colors around dynamic content

var ss = document.styleSheets;
var borderWidth = 3;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "div::after" || r.selectorText == "div:after") {
      var w = document.getElementsByTagName('span')[0].offsetWidth + (borderWidth * 2);
      var h = document.getElementsByTagName('span')[0].offsetHeight + (borderWidth * 2);
      r.style.width = w + 'px';
      r.style.height = h + 'px';
      r.style.left = -borderWidth + 'px';
      r.style.bottom = -borderWidth + 'px';
      // workaround for Chrome so that it doesn't render it with odd borders
      if (navigator.userAgent.indexOf('Chrome') > -1 && borderWidth > 1) {
        r.style.bottom = -borderWidth + 0.5 + 'px';
      }
    }
    if (r.selectorText == "div") {
      var w = document.getElementsByTagName('span')[0].offsetWidth;
      r.style.width = w + 'px';
    }
  }
}
div {
  position: relative;
  margin: 15px;
}
div:after {
  content: '';
  position: absolute;
  z-index: -1;
  background: linear-gradient(to right, brown, green);
}
span {
  background: white;
}
<div><span>This is some text</span></div>

Upvotes: 2

guest271314
guest271314

Reputation: 1

Try

css

hr {
    display:inline-block;
    width:50px;
    height:2px;
}

html

<table>
<tr><td>
    <hr color="brown" /><hr color="green" /><br />
    abc</td></tr>
    <tr><td>
    <hr color="brown" /><hr color="green" /><br />
    123</td></tr>
</table>


hr {
    display:inline-block;
    width:50px;
    height:2px;
}
<table>
<tr><td>
    <hr color="brown" /><hr color="green" /><br />
    abc</td></tr>
    <tr><td>
    <hr color="brown" /><hr color="green" /><br />
    123</td></tr>
</table>

Upvotes: 0

Jozsef Kerekes
Jozsef Kerekes

Reputation: 218

You could do it with border image:

-moz-border-image:-moz-linear-gradient(left, #805d00 0%, #805d00 50%, #38ad20 50%, #38ad20 100%);
-webkit-border-image:  -webkit-linear-gradient(left, #805d00 0%,#805d00 50%,#38ad20 50%,#38ad20 100%);
border-image: linear-gradient(to right, #805d00 0%,#805d00 50%,#38ad20 50%,#38ad20 100%);
border-image-slice: 1;

Upvotes: 0

Casey Warrer
Casey Warrer

Reputation: 1

Instead of putting more columns, just add tags that have different css classes for different colors OR you can write inline css like (more ugly approach that's not recommended but is simpler).

Upvotes: 0

Related Questions