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

Issue

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

Solution

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

Answered By – Crystal

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.