Is it possible to create a double border effect with one color on top and another color on the bottom using CSS?
I'm trying to recreate an image with a border that has two different colors on different parts of the width using only CSS:
Is it possible to create a double border effect with one color on top and another color on the bottom using CSS?
I'm trying to recreate an image with a border that has two different colors on different parts of the width using only CSS:
After much thought, I have come up with a solution. Take a look at this http://jsfiddle.net/RE4A7/
Here is the HTML code:
<ul>
<li><h3>Mission</h3>
</li>
</ul>
And the corresponding CSS:
ul h3 {
font-size:1.2em;
font-family:arial;
border-bottom:1px solid #333;
padding-bottom:10px;
position:relative;
width:250px;
}
ul li {
list-style:none;
}
ul h3:after {
border-bottom:1px solid #ff4800;
bottom:-1px;
left:0px;
content:"";
position:absolute;
width:55px;
}
UPDATE:
After further examination, it appears that the line in the post consists of two colors. To achieve a similar effect, you can utilize the border-image property (the example provided demonstrates the principle but may require adjustments for a perfect match):
CSS:
div {
border-top:0;
border-bottom:1px;
-webkit-border-image: -webkit-gradient(linear, left bottom, right bottom, from(#07f), to(#000), color-stop(0.3, #07f), color-stop(0.31, #000)) 21 20 30 21;
/* ... */
}
For compatibility with other browsers:
-moz-border-image:
-webkit-border-image:
-o-border-image:
border-image: /* standard */
Keep in mind that the gradient parameter may vary among different browsers, so adjustments may be necessary. The demo provided works only with webkit browsers.
Old
Are you looking for something like this?
To achieve this effect, you can apply the following CSS:
.myClass {
height:40px;
width:60px;
border:5px solid #00a;
box-shadow:0 0 0 5px #f00 inset;
padding:5px;
}
Setting the box-shadow to inset with no blur serves as the second part of the border. Additionally, the padding helps prevent content overlapping.
I've encountered a challenge with my Bootstrap Modal when trying to set the width to 750px on large desktops. When resizing the window to a smaller size, the modal loses its responsiveness. To tackle this, I added a class to the modal to give it a fix ...
I am currently learning about tables in Bootstrap 4. I am facing an issue where the background-color in the table-light class is not being applied. I suspect this might be due to the thead-dark class taking precedence over it. Could you please clarify why ...
When making an AJAX call and generating HTML on the backend side, the result may not display with the desired properties such as cursor styling. For example, using jQuery to render JSON data: $(data.message).each(function (index, value) { $('#sta ...
Similar Question: Stop parent container click event from firing when hyperlink clicked My issue is <div onClick="someJScode();"> ... <div></div> ... </div> I need to prevent someJScode() from executing when the inner di ...
For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...
I'm currently working on customizing a Wordpress menu that includes classic menu items and their respective submenus. The issue I'm facing is that when I hover over an item with children, its submenu will display. However, I want to have a fixed ...
Here is my JSFiddle demonstration featuring a scenario where there are 3 checkboxes. My goal is to assign the value "on" to the selected checkbox, while the unchecked ones should have a value of "off". Initially, I set all checkboxes to have a default va ...
I have been creating web pages using tables for a long time. Recently, I decided to make the switch to using divs like everyone else, but it has been quite challenging. Can anyone help me solve this issue? I have included an image to better illustrate the ...
I've been trying to use this code to load the ie.css file specifically for IE browsers, but for some reason it's not working. I'm feeling a bit confused here - can anyone help me figure this out? <html> <head> <titl ...
Currently, I am utilizing selenium to extract data from a liquor sales website to streamline the process of adding product information to a spreadsheet. My workflow involves logging into the website using selenium and searching for the specific product. Wh ...
Is there a way to apply this CSS styling to only one specific link and not all the links on my page? Here is the CSS code that is currently being applied to all links: a:visited { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px ...
Is there a way to add comments using Angular when a user clicks on a button? Currently, whenever text is entered in the input field or textarea, it disappears and an empty block without any name, country, and comments is displayed. The entered text should ...
When attempting to run a given example by double clicking inside the content area of an iframe, the clicks and any JavaScript events are not being fired. Currently, the events can only be triggered by clicking on the border of the iframe, not inside the ...
Having trouble floating an unordered list? Check out this jfiddle example that aligns a list next to some text: Here is the updated jfiddle link: https://jsfiddle.net/8qzygaog/ I created a test document based on the example, but it's not working as ...
Currently, I am utilizing the grid system with 2 columns set up as follows: <div class="row"> <div class="col-md-6"> 1 </div> <div class="col-md-6"> 2 </div> </div> ...
Having trouble getting my JavaScript file to fire when clicking the submit button on my simple HTML form. Can anyone provide some assistance? **UPDATED CODES Here is a snippet of my condensed HTML file: <html> <form name="form01" id="form01" ac ...
I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...
<style type="text/css"> form select { display:none; } form select.active { display:block; } </style> <script type="text/javascript"> window.onload = function () { var allElem = document. ...
Here is the HTML and JS setup I have for implementing a jQuery two-handle range slider: .html <p> <input class="amount" readonly style="border:0; color:black; background: transparent; text-align: center;" type="text"> </p> <div cla ...
I'm a beginner in JavaScript and I need help figuring out how to achieve the following task. Essentially, my goal is to have lines of code like this: <a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a> The number w ...