How can I incorporate dashed borders between images using CSS?

New to the world of HTML and CSS, I'm trying to replicate a design I came across online for some practice. The website layout includes images separated by borders, and I'm unsure if this particular design can be achieved using regular CSS alone or if additional tools like JavaScript are necessary. I attempted to use grid and added dotted borders, but it didn't turn out as expected.

.brands-sec .brands{
justify-items: center;
width: 70%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto auto auto ;
padding: 10px;
column-gap: 0px;
row-gap: 0px;
}

.brands-sec .brands img{
    border: 1px dotted #fff;
    padding: 40px;
}

Here's the design I'm aspiring to recreate.

htmlcss

Answer №1

Feel free to experiment with this sample based on your code and let me know what you think

.brands-sec{
justify-content: center;
display: grid;
grid-template-columns: auto auto auto auto auto auto ;
padding: 10px;

}

.brands{
    border: 1px dotted #fff;
    padding: 10px;
    background-color: #555;
    
}


.brands img {
    height: 100px;
    width: 100px;}
<div class="brands-sec">

  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>

</div>

Answer №2

To achieve the desired effect, you can utilize the CSS property border-collapse: collapse with dashed borders.

const pictures = [  ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAA1BMVEX+AAAYIGMAAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8GxYgAAb0jQ/cAAAAASUVORK5CYII=", 
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAA1BMVEUAlv+tY//LAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8GxYgAAb0jQ/cAAAAASUVORK5CYII="], 
  ["https://wallpaperaccess.com/full/1288346.jpg", 
  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUSEhMVFRUVFRcXFxcVGBgXFRcVFRUXFxcVFRcYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDQ0NDg0NDysZFRktLSsrKysrLTc3KzcrLSstLSsrNzctNzc3Ny0tNys3Ny0rLS03KzctNzc3LSstLS03Lf/AABEIAOEA4QMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAJhABAQEAAAQFBAMAAAAAAAAAAAERAiFh8BIxQVHBobHR8XGBkf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAwDAQACEQMRAD8A4xUWswYW1FQADAWJSUoC2CWgGkQVQhRCotQUWJQFol5KChgICWqCYqwsA0hhAAAZUAEXUBFABQgJQAEUFABChxIKVYaCBBRVgiiCYlUFhQtAIYaC6JoCIqApq1AQKa...
  
for (const row of pictures){
  const _row = document.createElement("tr"); 
  for (const picture of row){
    const _picture = document.createElement("td"), __picture = document.createElement("img"); 
    __picture.src = picture; 
    _picture.appendChild(__picture); 
    _row.appendChild(_picture); 
  }
  document.getElementById("images").appendChild(_row); 
}
table, td, th {
  border: 1px dashed black;
  border-collapse: collapse; 
}

td{
  padding: 10px; 
}

table img{
  width: 100px; 
  height: 100px; 
}
<table id="pictures"></table>

Answer №3

Alternatively, consider using the "background-image" property of the div element instead of the img tag.

.brand {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  border: dotted 1px gray;
  border-left-width: 0;
  border-top-width: 0;
  width: fit-content;
}

.brand .brand-image {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: dotted 1px gray;
  border-right-width: 0;
  border-bottom-width: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div class="brand">
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
</div>

Answer №4

Using dotes for image borders with the code .img{border: 1px #000 dotted} is a simple way to add style. The solution is straightforward and effective.

Answer №5

Instead of focusing on changing the image directly with .brands-sec .brands img { },

You can choose to style the surrounding container(s) that hold the images, such as

    .brands-sec .brands { 
        border-style: dashed;
    }

or

    .image-container-example {
        border-style: dashed;
    }

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

Creating a dynamic canvas with a three-dimensional model using three.js: A step-by-step guide

I'm currently developing a website where I have integrated a canvas element to display a 3D object (specifically, a cube) using three.js. The canvas is housed within a div, following the guidelines found in various documentation. The issue arises wh ...

javascriptcsshtmlthree.js

The concept of nested labels: defining conditions for displaying specific sections of a label

Let's say I have a label that contains the following text: <label>This is a text. This is another text.</label> Is there a way to indicate that the second sentence should only be visible when a boolean value is true? For example: <la ...

htmlangularjs

Is there a way to eliminate the return?

Struggling to eliminate the unwanted return in my Wordpress loop. The layout is ruined by trying to display a thumbnail next to the entry: https://i.sstatic.net/j3Ozz.png Even using padding for the entry made it worse! Here's the code snippet that ...

htmlcsswordpresspositioning

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

After clicking submit and attempting to retrieve text from the textarea, I am encountering a problem where the text appears blank. The reason for this issue eludes me. function textSubmit() { var text = $("#noise").val(); console.log(text); consol ...

javascripthtmltextareatext-editor

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

javascriptjqueryhtml

How can you tap into local storage in CSS while utilizing a chrome extension?

Can I access local storage from a Chrome extension's options file using CSS? Is it possible to use JavaScript to define a variable that can be utilized in CSS, or is local storage only accessible through JavaScript? If local storage is restricted to J ...

javascriptcssgoogle-chromegoogle-chrome-extensionlocal-storage

Utilizing the Power of ChartJs

I am currently in the process of developing a web application that will provide users with the ability to compare the number of calories they burn during exercise with the amount they consume in a meal. To achieve this goal, I have chosen to utilize ChartJ ...

pythonhtmldjangochart.js

What may be causing the MuiThemeProvider to override the style of a component?

Within my outer component, I am utilizing MuiThemeProvider: <MuiThemeProvider theme={full_theme_e}> <div> <AppBar /> <Filter /> </div> </MuiThemeProvider> Inside the Filter component, I have specified a ...

cssreactjsmaterial-ui

Most effective approach to managing state in a React UI Component

I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications. I've developed a specific approach to managing the sta ...

cssreactjs

What are the steps to add a Search Box to my HTML Website?

Currently, I am in search of a way to incorporate a "Search" feature on my website that is built solely with HTML. I have added a Search box for the users but I'm uncertain about how to proceed next. Can I use PHP to enable the Search functionality o ...

phpjavascriptjqueryhtmlsearch

Utilizing jPlayer to play music files uploaded using Paperclip in a Ruby on Rails application with the help of jQuery

Just wanted to say thanks in advance for any help. Currently, I am storing songs in a filesystem using Paperclip and attempting to play them with jPlayer. Despite following all the necessary steps, I am unable to get the audio to play when clicking on a ...

jqueryruby-on-railshtmlhtml5-audiojplayer

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

csslayoutxhtmlhtml

Using jQuery to slide elements across the page

I've been attempting to incorporate a sliding effect into my website, but I'm running into an issue where the sliding only occurs on the first click and I can't figure out why. Here is the code snippet I've been using: Html : $("#go ...

javascriptjquerycss

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

Utilizing Selenium with Java, you can hover over a button and choose to click on any of the available options

Currently, I am utilizing Selenium to automate the user interface using Java. Within the UI, there is an action button that, when hovered over by the User, displays two clickable options - Create and Edit. For ease of use, I have stored CSS locators as E ...

javacssseleniummousehover

Transferring Text from Word to Expression using Copy and Paste

Whenever I try to copy and paste content from a Word document into Expressions Web, I encounter some strange behavior. Often, the top line gets placed in one <span> tag while the rest ends up in another <span> tag, causing a slight gap between ...

htmlcssmicrosoft-expression-web

Having trouble using CSS to darken a background image in React?

My website (React.js) is giving me trouble with darkening the background image. I have attempted to darken the background image without success, even after trying the solution found here. I am utilizing the latest version of the Google Chrome browser for ...

cssreactjs

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

I'm having trouble changing the class of a single element within a v-for loop based on mouseenter/mouseleave events. I want only the hovered element to change its class, but currently, all elements in the list are affected. I attempted binding the cl ...

javascripthtmlcssvue.js

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...

htmlioscss

Problems with scrolling in the navigation bar, main content area, and footer

The challenge Encountering a scrolling anomaly with the Navigation Bar, Body, and Footer while utilizing Bootstrap 4. Everything appears to function smoothly on the desktop view. The glitch arises when I reduce the viewport size. The body fails to stay in ...

htmlcssbootstrap-4