CSS: split box border color

Question

I am trying to build a box, and I want that each line/div to be fully transparent in the middle and opaque at the edges. (In the image, the circled parts should be transparent...) I wrote something like this:

.box {
     height: 100px;
     width: 100px;
     border-left: solid green;
     border-right: solid green;
     border-top: solid red;
     border-bottom: solid red;
}

but, of course, it does not give me the result I want.... I can not figure out any way to fix that "opaque-transparent" problem.. Any help? Thanks in advance!

oh...this sounds like a border gradient. You can't do that with standard borders...you need border-image as I recall, — Paulie_D, Mar 14 '16 at 17:22
http://stackoverflow.com/questions/2717127/css3-gradient-borders — Paulie_D, Mar 14 '16 at 17:23

G-Cyrillus · Accepted Answer · 2016-03-14T17:38:11.550

2

You need to draw your borders via a gradient eventually: (untill border gradient is avalaible through all major browser ... chrome can do it for ages, FF still not )

.box {
     height: 100px;
     width: 100px;
     padding:3px;
  
  background:
    linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) top left no-repeat,
    linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) bottom left no-repeat,
    linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%) top left no-repeat,
    linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%)top right no-repeat;
  background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
}

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

Box-shadow on a known sized box can do some things too :

.boxbis {
  margin: 3em;
  height: 200px;
  width: 200px;
  background: gray;
  box-shadow: 70px 70px 0 -60px turquoise, 70px -70px 0 -60px pink, -70px 70px 0 -60px tomato, -70px -70px 0 -60px orange, inset 0 0 0 3px white
}

<div class="boxbis">
  <div>

edited Mar 14 '16 at 17:38

answered Mar 14 '16 at 17:26

G-Cyrillus

101,410
14
105
129

Can you explain to me what "to left" means? – Nelly Mar 14 '16 at 17:40
@Nelly it is the direction in which the gradient is to be drawn (starting from right to left ) – G-Cyrillus Mar 14 '16 at 17:42
@Nelly you may want to look at shadows too if size of the box is known , http://codepen.io/gc-nomade/pen/oxzKJp test with gradient and shadow aside + another old example with transition on last box border http://codepen.io/gc-nomade/pen/jdwgG hope that all this gives you ideas and helps to understand how this works – G-Cyrillus Mar 14 '16 at 17:44
Can I ask you a couple of questions? For instance, in this line: << linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) top left no-repeat >>, why did you choose the percentage of colors in this way? Also, I noticed that one border, can be splitted in 3 parts, but there are 4 colors( red, transparent, transparent and red) mentioned.. ?! – Nelly Mar 14 '16 at 17:58
@nelly the colors and values are split sharp points when values are the same (stop/start), if you remove the values, you have a reguar gradient, play with the pens linked to see how the values effects the gradients :) a gradient needs 2 colors minimum to be effective, but you can add as many you need – G-Cyrillus Mar 14 '16 at 18:14
1

I got it. Thank you! :D – Nelly Mar 14 '16 at 18:23

CSS: split box border color

1 Answers1