How can Border be implemented in different colors on the same side? maybe someone came across an example on the image enter image description here

  • through the gradient property border-image or background-image (also gradient), examples from the first link google border linear gradient - Alexander

1 answer 1

Well, as an option, you can use before and after

.wrapper { position: relative; background-color: orange; width: 300px; padding: 30px; } .wrapper:before, .wrapper:after { content: ''; position: absolute; border: 7px solid; top: 0; bottom: 0; } .wrapper:before { left: 0; width: 20%; border-right: none; border-color: #1f9fda; } .wrapper:after { right: 0; width: 65%; /* calc(80% - 60px) */ border-left: none; border-color: gray; } 
 <div class="wrapper"> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, deleniti? Quidem quibusdam aperiam dolores provident! Voluptas quam nam debitis mollitia.</div> </div>