Is there a way to add dotted borders between images in css-CodePudding

So I'm new to html and css and wanted to copy a design I saw on the web for practice. However, this section of the website has images seperated by borders. I'm not sure if it's possible to do in regular css or would I need to use javascript or something else? Also i tried using grid and added dotted borders, did not go as I thought.

.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;
}

This is the design I'm trying to make

CodePudding user response：

You can use border-collapse: collapse with dashed borders to achieve the effect.

const images = [  ["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/aAAwDAQACEQMRAD8A4xUWswYW1FQADAWJSUoC2CWgGkQVQhRCotQUWJQFol5KChgICWqCYqwsA0hhAAAZUAEXUBFABQgJQAEUFABChxIKVYaCBBRVgiiCYlUFhQtAIYaC6JoCIqApq1AQKaApDQECgYSJgK0gtEShUFXFzkhoi1BYBKLEAA0BUAWgoJy7xVz VBjWVKCoGghgUACAIpQRUUUioAUC0C0iaoAoIAUEpi4mAukiyACpFnfUDl7KxgAUxAUNUGSKgEhhpgLqUAII1ATWqyaBUa1BUUURFSLQBqM2gBpQFtSKBpI14WbQPFVTw98gCVMIlgCpFoIACKmLBSglAVNWAUJFETEqpAWAsAioQCwq1KCQFAxYmkoNaza1EoM6LnfdUEiWLCgiosoEqGoAqasAWxNWgkiyJiwFgJQNKyoGrEIiqsQVFSwpgBUUBUqwFiLYmUDRM6BQOI0AkVmLoJErTNgKQ0gLogAGgLAhQQACVeogNWVDVAQAEq4AjUTAFMWRATA5e8/wBBSggQBcRUBMa1MMBZCoUEWVK1KKRcSAhai4YCSkMXAXRCAst79wsQE0qgCxAFpUiwEDb1ARUAAAVKUBFCAJY0gIsMBVEURLVnpzzvpzSgEqxmNQDFiAGi1nAUpIUANICwlQBc6CAItEAVMXAKi4gIpSUFQ0BFRoDCqmAgACxJFwDVSRQQEwAUgEAwFkTdFBBrwzv9gM6hpoFAwFRalAtEigaULQTGozjUFDUgIigKpiRbRFEUBDV0GYoAtJTixICxKqAb3qpgCUtCAKEAqKUEtEqyAtiU0tBMaiasASqgGgABFAVFAiKgAAKkVMBdSqkgKADOCFBYBAWoqACYCgqALEaBIUKIYimCmqkBFppFoIGAFNAAFARZUwDev3ABEvygDUJ39ABq/n7s8XoAF EnkANRADCr6gBxJQBanuALPwABPT 1ACpxACcPy1PKgKxFAFvkkARQBX/9k="]
]; 

for (const row of images){
  const _row = document.createElement("tr"); 
  for (const image of row){
    const _image = document.createElement("td"), __image = document.createElement("img"); 
    __image.src = image; 
    _image.appendChild(__image); 
    _row.appendChild(_image); 
  }
  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="images"></table>

CodePudding user response：

Here's some sample you can play with base on your code. Let me know

.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 >

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

</div>

CodePudding user response：

Or you can try to use "background-image" of div instead of img

.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 >
  <div  style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div  style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div  style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div  style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div  style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div  style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
</div>

CodePudding user response：

It's easy wherever you want image borders to be dotes .img{border: 1px #000 dotted}. The answer is easy just like that

CodePudding user response：

Instead of targeting the image like so .brands-sec .brands img { },

you could target and style the container(s) holding the images, e.g.,

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

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