Merge Border Colors for a section tag using CSS

  • A+
Category:Languages

I created a centered slightly rotated section border. Also, I gave each side of the section different color. Here what my basic code looks like:

body{     background-color: #594451;     color: #fff; }  .boxed{     position: absolute;     margin:auto;     /* border: 3pc solid rgba(255, 255, 255 ,1); */     border-left: solid rgba(127, 203, 170, 1) 3pc;     border-right: solid rgba(186, 179, 173, 1) 3pc;     border-bottom: solid rgba(0, 171, 238, 1) 3pc;     border-top: solid rgba(229, 99, 57, 1) 3pc;     height: 20pc;     width: 20pc;     top: 0;     right: 0;     bottom: 0;     left: 0;     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     -o-transform: rotate(45deg);     -ms-transform: rotate(45deg);     transform: rotate(45deg);      }
<h1>Welcome to Rahul's Lab</h1>     <section class="boxed">         <!-- <p>This will contain the box properly</p> -->     </section>

Can I achieve border overlapped on each other? Is it possible by just using CSS or Do I have to create separate section/div for that? HTML & CSS Design and build websites

Reference: Cover picture of HTML & CSS Design and build websites by Jon Duckett.


Borders overlaping isn't possible…

… but, here is a solution to create your effect with CSS only, using:

  • Multiple linear-gradients to create the background
  • background-blend-mode to mix the colors in the corners

⋅ ⋅ ⋅

Updated snippet:
Using background shorthand syntax, like Temani did here https://stackoverflow.com/a/50526694/5061000

.boxed {   position: absolute;   margin: 5pc auto; /* Modified to better fit in tiny snippet */   --border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */   background:     /* Shorthand syntax used below: image position/sizeX sizeY */     linear-gradient(rgba(229, 099, 057, 1), rgba(229, 099, 057, 1)) top   /100% var(--border-pc), /* Orange with CSS var */     linear-gradient(rgba(000, 171, 238, 1), rgba(000, 171, 238, 1)) bottom/100% var(--border-pc), /* Blue */     linear-gradient(rgba(127, 203, 170, 1), rgba(127, 203, 170, 1)) left  /var(--border-pc) 100%, /* Green */     linear-gradient(rgba(186, 179, 173, 1), rgba(186, 179, 173, 1)) right /var(--border-pc) 100%; /* Gray */   background-blend-mode: multiply;   background-repeat: no-repeat;   height: 20pc;   width: 20pc;   top: 0;   right: 0;   bottom: 0;   left: 0;   transform: rotate(45deg); }
<section class="boxed">   <!-- <p>This will contain the box properly</p> --> </section>

⋅ ⋅ ⋅

Old style snippet:
Yep, it's working, but I prefer the first one!

.boxed {   position: absolute;   margin: 5pc auto; /* Modified to better fit in tiny snippet */   --border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */   /* I tried to indent it to better see the code: */   background-image:     linear-gradient(to top, /* Blue */       rgba(0, 171, 238, 1) 0%,       rgba(0, 171, 238, 1) var(--border-pc), /* example use of the CSS var */       transparent var(--border-pc) ),     linear-gradient(to right, /* Green */       rgba(127, 203, 170, 1) 0%,       rgba(127, 203, 170, 1) 10%,       transparent 10% ),     linear-gradient(to bottom, /* Orange */       rgba(229, 99, 57, 1) 0%,       rgba(229, 99, 57, 1) 10%,        transparent 10% ),     linear-gradient(to left, /* Gray */       rgba(186, 179, 173, 1) 0%,       rgba(186, 179, 173, 1) 10%,       transparent 10% );   background-blend-mode: multiply; /* Added to mix the colors */   height: 20pc;   width: 20pc;   top: 0;   right: 0;   bottom: 0;   left: 0;   transform: rotate(45deg); }
<section class="boxed">   <!-- <p>This will contain the box properly</p> --> </section>

(Note that if you don't use the background-blend-mode you can pick which gradients are overlapping the others by playing with their order!)

Hope it helps.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: