Create border with more than one color - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Create border with more than one color

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>repeating border-color</title> 
  <style>

.box1 {<!--from ww  w  .  j ava 2 s  . c o  m-->
   background:
   linear-gradient(
   to left,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )no-repeat;
   background-size:100% 1em ;
}
.box2 {
   background:
   linear-gradient(
   to left,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )top no-repeat,
   linear-gradient(
   to right,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )bottom no-repeat;
   background-size:100% 4px,100% 4px ;
}
.box3 {
   background:
   linear-gradient(
   to left,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )top no-repeat,
   linear-gradient(
   to right,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )bottom no-repeat,
   linear-gradient(
   to top,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )left no-repeat;
   background-size:100% 6px,100% 6px, 8px 100% ;
}
.box4 {
   background:
   linear-gradient(
   to left,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )top no-repeat,
   linear-gradient(
   to right,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )bottom no-repeat,
   linear-gradient(
   to top,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )left no-repeat,
   linear-gradient(
   to bottom,
   red 0,
   red 33.3%,
   orange 33.3%,
   orange 66.6%,
   blue 66.6%,
   blue )right no-repeat;
   background-size:100% 33.3%,100% 33.3%, 33.3% 100%, 33.3% 100% ;
   transition:1s
}
.border {
   background-color:lightgray;
   display:inline-block;
   width:10%;
   padding:1em;
   margin:1em;
}
body {
   text-align:center;
}
.border:before {
   content:'';
   padding-top:100%;
   display:inline-block;
   vertical-align:middle;
   margin: 0  -0.277em;
}
.box4:hover {
   background-size:100% 5px,100% 5px, 5px 100%, 5px 100% ;
   transition:1s
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="border box1">
    box1 
  </div> 
  <div class="border box2">
    box2 
  </div> 
  <div class="border box3">
    box3 
  </div> 
  <div class="border box4">
    (box4) 
  </div>  
 </body>
</html>

Related Tutorials