Utilizing border-image property to showcase four dots in each corner of my div container

I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why the entire border is not showing up?

https://i.sstatic.net/k2Psq.jpg

.slider {
  width: 90%;
  min-height: 15vw;
  background: white;
  position: relative;
  float: left;
  display: block;
  border-style: solid;
  border-width: 0.3vw;
  border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);
  margin-left: 5%;
  margin-bottom: 2.5%;
  margin-top: -27.5%;
  border-radius: 8px;
  box-shadow: 2px 2px 4px 0px #000000;
  z-index: 20;
}

.insideslider {
  width: 80%;
  margin-left: 2.5%;
  float: left;
  position: relative;
}

.slides {
  position: relative;
  float: left;
  display: inline;
  width: 30%;
  margin-left: 3%;
  margin-top: 3.5%;
}

#slide1 {
  margin-left: 1.5%;
}

#slide2 {}

#slide3 {} 

.leftarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
}

.rightarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
  transform: rotate(180deg);
}
<div class="slider">

  <img class="leftarrow" src="images/rewind.png" />

  <div class="insideslider">
    <img class="slides" id="slide1" src="images/aandrijvingen.png" />

    <img class="slides" id="slide2" src="images/electronicrepair.png" />

    <img class="slides" id="slide3" src="images/retrofit.png" />

  </div>

  <img class="rightarrow" src="images/rewind.png" />

</div>

htmlcssborderborder-image

Answer №1

If you want the border image to display properly across all sides instead of just the corners, you must set the border-image-slice property. The initial value is 100%, but as described in this answer, only the corners will show the border image if the sum of left + right (or) top + bottom offsets is greater than the image width or height, respectively.

In the code snippet below, I have set the value to 1 (assuming an unitless value of 1px). When gradients are utilized, the image dimensions match the container box's dimensions, so a 1px value for border-image-slice ensures that the sum of left and right (or top and bottom) offsets rarely exceeds the image dimensions.

Note: border-image does not conform to the border-radius property; it retains a rectangular/square appearance. The W3C Specs excerpt below clarifies this (linked above).

A box's backgrounds, but not its border-image, are clipped to the appropriate curve...

.slider {
  width: 90%;
  min-height: 15vw;
  background: white;
  position: relative;
  float: left;
  display: block;
  border-style: solid;
  border-width: 0.3vw;
  border-image: linear-gradient(-180deg, #2D6BD0 0%, red 100%);
  border-image-slice: 1;
  margin-left: 5%;
  margin-bottom: 2.5%;
 /* margin-top: -27.5%;*/
  border-radius: 8px;
  box-shadow: 2px 2px 4px 0px #000000;
  z-index: 20;
}

.insideslider {
  width: 80%;
  margin-left: 2.5%;
  float: left;
  position: relative;
}

.slides {
  position: relative;
  float: left;
  display: inline;
  width: 30%;
  margin-left: 3%;
  margin-top: 3.5%;
}

#slide1 {
  margin-left: 1.5%;
}

#slide2 {}

#slide3 {} 

.leftarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
}

.rightarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
  transform: rotate(180deg);
}
<div class="slider">

  <img class="leftarrow" src="images/rewind.png" />

  <div class="insideslider">
    <img class="slides" id="slide1" src="images/aandrijvingen.png" />

    <img class="slides" id="slide2" src="images/electronicrepair.png" />

    <img class="slides" id="slide3" src="images/retrofit.png" />

  </div>

  <img class="rightarrow" src="images/rewind.png" />

</div>

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

Why isn't my Jquery click event able to download the csv file?

Initially, I was able to export a csv file using the html onclick element. However, when I switched to a jquery click event, the functionality stopped working. I don't understand why, as I believe the same function is being called. The Export.Expor ...

javascriptjqueryhtmlcsv

In-Place Editing Revolutionizing Content Editing

What is the most effective method for editing content while using ng-repeat? In an ideal scenario, the added birthday would be displayed as a hyperlink. When clicked, it would reveal an edit form similar to the add form, along with an update button. Chec ...

htmlangularjsedit

Unable to modify jwplayer css styles to customize the chromecast icon

Is there a way to customize the chromecast icon within the JWPlayer skin to have a specific color? I've identified that the styles I need to change are --connected-color and disconnected-color when inspecting the element. Despite my attempts through ...

csssassjwplayerchromecast

Steps for applying background color to a chosen element

Using a specific template, I have listed topics in the following way: //Template used for topic list display %li.topic{:topic_slug => "<%=topic.slug%>", :topic_name =>"<%=topic.text%>"} %a{href: "#!/topics/<%=topic.slug%>" } <%= ...

javascriptjquerycssbackgroundhaml

I am seeing the number 1 mysteriously popping up on my HTML page without my intervention

Working on a website design, I encountered an issue with my HTML code. When executing and displaying content from a PHP file on the page, a strange number 1 is added after parsing the PHP file's content. Here is the snippet of HTML and PHP causing th ...

phpcsshtml

All components in my app are being styled by CSS files

Currently, I am facing an issue with my React app in VS Code. My goal is to assign a distinct background color to each component. However, the problem arises when unwanted CSS styles from other files start affecting components even though they are not impo ...

cssreactjs

Adjust the SVG to match the dimensions of the label, which may vary in both

How can I efficiently resize and embed SVG images into checkbox labels without using a viewbox attribute? Each SVG varies in height and width, making it challenging to find the best solution. .check__button { display: none; } .check__icon { display ...

htmlcsssvg

Struggling to center a div within another div using margin auto

Hey there, I'm looking for some help with my code. Here's what I have: .center{ width: 100%; margin: 0 auto; border: 1px solid red; } .nav{ background: #606060; width: 90%; } HTML <!DOCTYPE html> <html> < ...

htmlcss

Tips for eliminating repetitive code in JavaScript

I have a jQuery function that deals with elements containing a prefix 'receive' in their class or ID names. Now, I need to duplicate this function for elements with the prefix 'send'. Currently, it looks like this: function onSelectAddr ...

javascripthtmljquery

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

htmlcsshtml5-video

Unable to trigger JavaScript function from ASP.NET MVC HTML view

I am encountering an issue with my ASP.NET MVC project where I am attempting to call a JavaScript function to record a user's selection from a listbox. Despite duplicating the JavaScript function in multiple places, it is still not being found. What c ...

javascripthtmlasp.net-mvc

Implementing change event to activate select dropdown with jQuery

Is there a way to modify the code so that select2 and select3 are disabled by default, but become enabled only when an option is selected in the previous select dropdown (excluding the placeholder "Select your option")? In addition, I want the first place ...

javascriptjqueryhtml

Center div encroaching on floated left div

Can someone help me align three divs horizontally? I'm having an issue where the center div is overlapping the left div. What could be causing this problem? <div> <div style={{width:"100px", border:"solid blue", ...

htmlcssreactjscss-float

Increasing the size of the td element when including a new row

Here is an html page example that I am working with: However, when I add a new row beneath the existing row that contains a div block and form within it, I notice that the td tag in the first row expands in width, as depicted in the image below. Below is ...

htmlcsshtml-table

What is the best way to ensure that my grid remains contained within its designated area?

I need to incorporate a grid of 16x16 or 64x64 into my layout without it overflowing. I'm considering using flexbox, but unsure of the implementation process. My goal is to have the grid resize based on the container size rather than exceeding its bou ...

javascripthtmlcss

Grouping and retrieving values from an array of JavaScript objects

I am looking to implement a groupBy function on the object array below based on the deptId. I want to then render this data on a web page using AngularJS as shown: Sample Object Array: var arr = [ {deptId: '12345', deptName: 'Marketin ...

javascriptangularjshtmllodash

Setting header details for optimal data transfer

Currently, there is a Java code snippet that I am working on which attempts to access the header information sent by an HTML page. Unfortunately, I do not currently have the specific HTML page in question. However, I still need to be able to access and m ...

javajavascripthtmlhttpheader

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

What is the best way to populate a select input field with options using JavaScript?

When I am loading an HTML table, there is a select input field that needs to display some options. Immediately after constructing the HTML table row, I invoke a function to populate this input field using its class. Below is the relevant HTML snippet and ...

javascripthtml