Is it possible to create a CSS border with 4 different colors on one side? Currently, I have the following:
#header
{
border-color:#88a9eb;
}
I aim to achieve a border featuring four solid colors split equally at 25% each. Can this be done?
I am looking to create a seamless solid version without any white gaps in between like in the image below.
Utilize the border-image property to craft a gradient border with 4 colors. By strategically setting the color-stops (percentage values), you can create sharp transitions between colors instead of a gradual blend, resulting in a distinct block-like effect.
To apply the border on specific sides, adjust the border-image-width and gradient direction accordingly. For instance, top & bottom borders require a left to right gradient, while left & right borders need a top to bottom gradient.
The use of percentage values for size and color stops in gradients ensures responsiveness by adapting to changes in container dimensions automatically.
An issue with using border-image is its current lack of support in certain browsers, notably IE10-, which do not recognize this property.
.bordered-top {
border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 4px 0px 0px 0px;
}
.bordered-bottom {
border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 0px 0px 4px 0px;
}
.bordered-left {
border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 0px 0px 0px 4px;
}
.bordered-right {
border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 0px 4px 0px 0px;
}
div {
height: 100px;
width: 300px;
padding: 10px;
background: beige;
margin: 10px;
}<!-- library added only for old browser support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='bordered-top'>Border only on top</div>
<div class='bordered-bottom'>Border only on bottom</div>
<div class='bordered-left'>Border only on left</div>
<div class='bordered-right'>Border only on right</div>To achieve a similar effect in IE10+, consider using gradients for the background-image property instead of border-image, demonstrated in the following snippet.
Unlike border-image, control over the applied border side needs to be managed through background-position rather than border-image-width. The thickness of the border is determined by adjusting the background-size, where x-axis refers to thickness for top & bottom borders, and y-axis for left & right borders.
.bordered-top {
background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 100% 4px;
background-repeat: no-repeat;
background-position: 0% 0%;
}
.bordered-bottom {
background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 100% 4px;
background-repeat: no-repeat;
background-position: 0% 100%;
}
.bordered-left {
background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 4px 100%;
background-repeat: no-repeat;
background-position: 0% 0%;
}
.bordered-right {
background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 4px 100%;
background-repeat: no-repeat;
background-position: 100% 0%;
}
div {
height: 100px;
width: 300px;
padding: 10px;
background: beige;
margin: 10px;
}<!-- library added only for old browser support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='bordered-top'>Border only on top</div>
<div class='bordered-bottom'>Border only on bottom</div>
<div class='bordered-left'>Border only on left</div>
<div class='bordered-right'>Border only on right</div>To achieve this effect, utilize the CSS properties `box-shadow` and the `after` pseudo-element.
My approach involved creating an `:after` element at the bottom and applying horizontal `box-shadow`s with various colors.
If you wish to adjust the intensity of the border, simply increase the height of the `:after` element.
div {
width: 200px;
height: 100px;
position: relative;
background: grey;
}
div:after {
bottom: 0;
position: absolute;
content: "";
width: 50px;
height: 5px;
background: green;
box-shadow: 50px 0 0 0 red, 100px 0 0 0 orange, 150px 0 0 0 green;
}<div></div>Applying the same technique to a larger `div` would yield a result like this:
div {
width: 500px;
height: 100px;
background: orange;
position: relative;
}
div:after {
bottom: 0;
position: absolute;
content: "";
width: 100px;
height: 5px;
background: green;
box-shadow: 100px 0 0 0 darkred, 200px 0 0 0 red, 300px 0 0 0 yellow, 400px 0 0 0 tomato;
}<div></div>After taking inspiration from Harry's original idea, I made some modifications to customize it for my own requirements. Here is the updated code:
border-image: linear-gradient(to right, #8CC63F 0%, #006F3B 25%, #ED1C24 25%, #9B1B1E 50%, #85CDEC 50%, #217EC2 75%, #FFC20E 75%, #F04E23 100%);
border-image-slice: 3;
border-image-width: 0px 0px 4px 0px;
border-image-repeat: round;
This revised solution perfectly suits my current needs.
Here are some creative solutions for adding borders:
You can create a unique and intricate border using SVG by adding paths with different stroke-dasharray and stroke-color attributes.
For a simpler approach, consider using the border-image property.
If you just need a basic border, you can easily achieve it by creating an image to use as the background, repeating it on one axis, and positioning it at the edge of the container. For example, for a bottom border:
.container {
background-image: url(image.png);
background-repeat: repeat-x;
background-position: bottom left;
}
Here is a suggestion for you to experiment with:
.solid{
width: 300px;
border-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);
border-image-slice: 4;
}
Using a linear-gradient is the best solution for this challenge. However, beginners may find this alternative solution helpful. By incorporating 2, 3, or even 4 colors, one can create borders in different ways. While it may not be the most optimal solution, it can aid readers in understanding how colors and borders interact.
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>How can I make the h4 tags fade in after the divs slide into view, while also adding the class "current" to each visible slide? Check out the example on JSFiddle here. <div class="slider"> <div class="slides"> <div class="slide ...
I am currently working on creating a "web dashboard" that requires a year_from parameter from an HTML form. Despite setting up my Flask backend to return data within this specified range, I am encountering a problem where every time I hit submit, the selec ...
This project is specifically designed for mobile use, so there's no need to worry about how it will appear on desktop screens. In this project, I have an "a href" with an icon next to it that simulates a button. When a user clicks on it, a dropdown me ...
Issue with implementing Pure CSS Masonry layout. Using position: relative for the boxes and position: absolute for the content inside each box is causing gaps below each box. Struggling to find a solution, view the code on this codepen: http://codepen.io/k ...
I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...
I'm working on developing a page template that utilizes section headers and dynamically pulled content from a separate database. The current setup of the page resembles the following structure: <tr> <td> <h3> ...
When trying to call the submit() function as soon as the page loads, I keep encountering a submit() method not found error. The positioning of ng-controller and onload is confusing to me. If there is an alternate method in Angular to achieve this, please ...
Attempting to align text elements within a responsive layout presents challenges due to the fluid nature of <div> sizes. I recently discovered a fantastic method for horizontally and vertically centering a child <div> inside its parent <div ...
I've been attempting to create a falling line effect on the left side of the box's border, but I can't seem to figure out what's causing the issue. Below is the code snippet: @import url('https://fonts.googleapis.com/css ...
I'm having trouble getting the background image to show up correctly using tailwind.Config.Js. Even though Tailwind.Config.Js is generating the background image perfectly, when I view it in the browser, it's displaying a 404 error for the image. ...
Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...
Similar Question: How to disable backspace except textbox using jQuery I am looking for a solution to prevent the BACKSPACE button from functioning unless it is within a TEXT field. Although I have tried the code below, it ends up disabling the backs ...
My Bootstrap cards are not aligning side by side and I'm having trouble locating the error in my code. I'm working with Django and HTML. {% extends 'base.html' %} <div> {% block content %} <h1>Team Members<h1& ...
When using crispy forms, the labels for CheckboxSelectMultiple() fields are populated from the default string representation of objects defined in a list. To change this behavior, I am seeking assistance. Is it possible to create a custom string represent ...
My goal is to incorporate a simple interpolation into a mixin call: $shapes: "square", "square-green", "circle"; $platforms: "facebook", "twitter", "linkedin", "gplus", "feed"; @each $shape in $shapes { @include sprite-#{$shape}; @each $platform ...
I'm struggling to design a navigation layout for my website where I want to display the main menu items like this: Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 and have their respective sub-menus displayed horizontally on their main menu pages like this: ...
My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...
<?php if(mysqli_num_rows($result)>0) {?> <table class="table table-striped" id="example" align="center"> <tr> <thead> <th style=&quo ...
Hey everyone, so I'm currently working on building my very first website and I decided to start off using a template that I found online. The layout of the pages consists of 2 columns with div tags - one for text on the left side and the other for ima ...
I'm facing an issue where the footer field I add under a div with an absolute value escapes on both mobile and desktop. Additionally, the iframe does not have full height. Any suggestions on what I should do? All the specifics are provided in the att ...