The border color remains unchanged

I have designed a div with a border image on the right side and I want to add a colored border on the left side. However, when I change the color, it doesn't appear. How can I resolve this issue? Check out my FIDDLE for reference.

CSS:

div{
    height:200px;
    width:200px;
    background:#EA6E0E;
    border-image-slice: 0 31 0 0; 
    border-image-width: 0px 20px 0px 0px; 
    border-image-outset: 0px 0px 7px 0px; 
    border-image-repeat: stretch stretch; 
    border-image-source: url("http://i.imgur.com/pN8TPVw.jpg?1");

    border-radius:8px;
    border-left:8px solid #000; //NOT WORKING
}

Answer №1

To achieve both a border-image and a left-border, you can give the parent div a left-border and then use a separate div to act as the border image. Simply set the parent div with position: relative; so that all child elements are positioned relative to it. Then, style the border-div with

height: 100%; position: absolute; right: 0; width: 20px;

Check out this JSFIDDLE for an example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Signs that indicate a socket has truly disconnected

socket.on('disconnect') isn't behaving as I anticipated. I want to be able to track when a user leaves my website completely, not just switches pages. Currently, navigating to a different route on my webpage triggers the socket disconnect ev ...

Is it possible to maintain the maximum height and width of a div across all levels of zoom?

In the process of developing a web application, I encountered an issue regarding setting the width and height of a div to a fixed number, regardless of the zoom level. While I was successful in changing the background color of the div across all zoom level ...

The custom attribute in jQuery does not seem to be functioning properly when used with the

I am currently working with a select type that includes custom attributes in the option tags. While I am able to retrieve the value, I am experiencing difficulty accessing the value of the custom attribute. Check out this Jsfiddle for reference: JSFIDDLE ...

Images placed side by side, creating a dynamic and visually appealing layout

Can anyone help me figure out how to display three photos like this? https://i.sstatic.net/wD5At.png The photos cover the full width only if I set the css width: 100vh for all, but then the middle photo becomes disproportionate (black frames show how I wo ...

Is there a space added after applying overflow:hidden to a div?

.d1 { height: 10px; } .dd { display: inline-block; overflow: hidden; } .dd1 { display: inline-block; } <div class="d1"> <div class="dd"></div> <div class="dd1"></div> </div> To adjust the layout so that th ...

Is there a way to format this text horizontally?

Hey there, I'm trying to align the h4 with the p text. I attempted using display: inline-block, but it didn't do the trick. Can anyone lend a hand? Thanks in advance for any help! <h4>2.1</h4><p> Please refrain from blasphemy ...

How can Selenium and Python be used to refresh a webpage until a specific item is found?

I'm attempting to continuously refresh the page until a specific item appears, but my current code is not working. I took inspiration from this solution: python selenium keep refreshing until item found (Chromedriver). Below is my code snippet: whil ...

placing circular button beside pick component

I have created a code that retrieves json from a backend api and fills a select component in vue. I'm looking to include a reload button beside the select component, <!DOCTYPE html> <html lang="en"> <title>Test page app</title ...

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

Creating a responsive canvas and image container in fabric.js involves adjusting the layout and size of the

I am working with fabric.js and canvas to dynamically add an image from a URL. I would like to make the canvas responsive based on the resolution. How can this be achieved? Here is my current code: <canvas id="panel" width="700" height="350"></ ...

Challenges with personalized music player

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/CSS"> #custom{ font-family: monospace; font-size: 16px; max-width: 650px; ...

Employ the CSS pseudo-element :before within a UL element to generate a vertical line

I'm currently working on a vertical menu with the capability of having submenus. My aim is to include a vertical line using CSS pseudo-element ::before along with border. The challenge I'm encountering is that the CSS is applying to the entire m ...

What is the best way to send multiple values to a PHP function through an AJAX request?

I wrote the following code snippet: var name= "theName"; var surname= $('#surname').val(); $.ajax({ url: 'SaveEdit.php', type: 'post', data: { "callFunc1": whichOne}, success: funct ...

Restrict the height of a division based on the adjacent division

Within the parent div, I have two child div elements that are meant to be positioned side by side. The first element contains an image which loads dynamically, meaning its height is unknown in advance. I want the parent div's total height to match the ...

Styling Material UI components with CSS is a great way to

I'm facing difficulties while working with Material UI components. Currently, I have a Material UI table and I want to center-align the text within it. The standard CSS of Material UI contains an element named MuiTableCell-root-60 which has a text-a ...

Web Page Layout Altered on Smaller Screen with Internet Explorer 6

After designing an ASP.NET web page on a widescreen monitor with IE10, I was surprised to see it looking completely different when opened on a regular (non-widescreen) monitor running IE6. While the functionality remained intact, some transparency effect ...

Can you identify the selected item on the menu?

My goal is to highlight the menu item for the current page by adding a "current" class. I've tried several code snippets from this website, but most of them didn't work as expected. The code I'm currently using almost works, but it has a sma ...

What is the process for updating the names and IDs of HTML elements?

I need help with updating the index of elements in a dynamic form when an item is deleted. For instance, if I have items named items1, items2, items3, items4, and items5, and I delete items3, I want the remaining items to be re-indexed to items1, items2, i ...

The Countdown feature is currently only functioning on the initial button and not on any of the other buttons

I could use some assistance. I have a download button with a countdown, but there seems to be an issue with the button's functionality. It only works on the first button, or if the second button is clicked first, it starts the countdown on the first b ...

Challenges with the grid system in Bootstrap version 5.3

Hello there, I am trying to craft the front end of my website using Bootstrap 5.3. However, I am encountering an issue with the grid system. It seems like the classes are not behaving as they should be. Below is the code I am using: <div class="co ...