sass border with 3 colors, is possible?

Question

So, I'm trying to create an border of 1px, with a color 30% green, 20% red, 27% blue, with 70% of opacity, it is possible? I'm using sass but I have not found a way to make this

.box
  width: 100px
  height: 100px
  background: gray
  margin: 50px auto 0 auto
  border-color: #ff0000 #0000ff

My pen: http://codepen.io/mejingjard/pen/xwxLKO?editors=110

Possible duplicate: http://stackoverflow.com/questions/19463904/css-double-border-with-different-color — cimmanon, Sep 01 '15 at 03:17

score 1 · Accepted Answer · answered Sep 01 '15 at 03:00

1

Yes it's possible, and it's actually really simple with rgba()

border-color: rgba(20%,30%,27%,0.7);

Read about this and more sass color functions at http://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method

answered Sep 01 '15 at 03:00

Ben Kolya Mansley

1,768
16
24

Please take a look at my pen, have any error here? http://codepen.io/mejingjard/pen/xwxLKO?editors=110 – Wagner Moreira Sep 01 '15 at 03:07
Just one color appear – Wagner Moreira Sep 01 '15 at 03:08
1

What do you want to happen? – Ben Kolya Mansley Sep 01 '15 at 03:09
I got it! haha, is the color mix of the 3 colors, thanks! – Wagner Moreira Sep 01 '15 at 03:38

score 1 · Answer 2 · answered Sep 01 '15 at 03:41

You can give this a try, however this alternative is with four borders, not the three. With RGBA you can change the opacity. You can visit http://www.cssportal.com/css3-rgba-generator/ to generate the CSS3 RGBA colours; there you can also change the opacity.

div {
  width: 100px;
  height: 100px;
  margin: auto;
}
.one {
  border-top: 1px solid rgba(0, 255, 0, 0.7);
  border-right: 1px solid rgba(255, 0, 0, 0.7);
  border-bottom: 1px solid rgba(0, 0, 255, 0.7);
  border-left: 1px solid rgba(255, 0, 0, .5);

<div class="one"></div>

Alternatively if you wanted to go for more of a gradient look you can try applying a CSS3 gradient within a pseudo-element, however only two border colors are adopted, and it's without the opacity.

.one{
    margin: auto;
    width: 100px;
    height: 100px;
     border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #E93478 0%, #FF0 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #E93478 0%, #FF0 100%);
    border-image: linear-gradient(to bottom, #E93478 0%, #FF0 100%);
    border-image-slice: 1;}

<div class="one"></div>

sass border with 3 colors, is possible?

2 Answers2