Color border in corners seperatly

Question

Is there any way to color a border corner in CSS?

I.e. : border-top-left-corner-color: red

If it can\'t be done in pure CSS, can it be

Answer 1

A little bit late ..

Here is my solution

.test {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    background-image: linear-gradient(0deg, white 0%, white 100%),
        linear-gradient(0deg, green 0%, green 100%),
        linear-gradient(0deg, red 0%, red 100%),
        linear-gradient(0deg, yellow 0%, yellow 100%),
        linear-gradient(0deg, blue 0%, blue 100%);
    background-origin: padding-box, border-box, border-box, border-box, border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: top left, top left, top right, bottom left, bottom right;
}

The colors are achieved as 4 backgrounds set to border-box. They are then masked by a white background set to padding-box.

Notice that the thickness of the border is still set with the border property. (but the border itself is transparent)

An alternate approach, using a pseudo element to mask the inner part

.test {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    background-image: linear-gradient(0deg, green 0%, green 100%),
        linear-gradient(0deg, red 0%, red 100%),
        linear-gradient(0deg, yellow 0%, yellow 100%),
        linear-gradient(0deg, blue 0%, blue 100%);
    background-origin: border-box, border-box, border-box, border-box;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: top left, top right, bottom left, bottom right;
    border-radius: 40px;
  position: relative;
}

.test:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background-color: white;
  border-radius: 30px;
}