CODEWITHSUNDEEP
htmlcss
codesayan
codesayan

Reputation: 1715

How to make Square dotted border

I want make a Square spaced dotted border, Can anyone please tell how to make those dots Square, Like,

enter image description here

Here is my code, Please help me. 

.dots{
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}
div {
  padding: 10px 50px;
  width: 100px;
  height: 200px; 
}
<div class="dots">Dotted border</div>

Upvotes: 1

Views: 6364

Answers (4)

Peter H&#248;jlund Palluth
Peter H&#248;jlund Palluth

Reputation: 901

I found another simple way to do it, (almost) cross-browser that i want to share.

'dotted' is not cross-browser! The border value 'dotted' is round in Firefox and squared in Chrome. And they are behaving strange when resizing.

  1. Make a simple SVG file with the two colours as squared elements:
<?xml version="1.0" encoding="utf-8"?>
<svg class="it-dotted-line" xmlns="http://www.w3.org/2000/svg" width="8" height="8">
  <rect width="4" height="4" style="fill:#F4EDF4"></rect>
  <rect x="4" width="4" height="4" style="fill:#B489B4"></rect>
</svg>

The height is 8 as well so the image is squared - easier to work with.

  1. Save it as a .svg file and upload it to your webhotel so you can use it in border-image.

Just put the code in your code-editor and save it as a .svg file.

  1. The CSS:
.dots {
  -o-border-image: url(/svg-dotted.svg) 25% repeat; /* Opera 11-12.1 */
  -webkit-border-image: url(/svg-dotted.svg) 25% repeat ; /* Safari 3.1-5 */   
  border-image: url(/svg-dotted.svg) 25% repeat;
  border-width: 0px; // Only for top border - remove others
  border-top-width: 10px; 
  border-style: solid;
}

Result (top of a footer):

enter image description here

Note: Internet Explorer 10, and earlier versions, do not support the border-image property.

Upvotes: 0

M Thomas
M Thomas

Reputation: 1192

I have modified your CSS, need fine tuning :)

.dots:after{
   background-image: linear-gradient(to bottom, white 1%, red 0%, red 20%, rgba(255, 255, 0, 0) 0%);
  background-position: right;
  background-size: 6px 30px;
  background-repeat: repeat-y;
  position: absolute;
  left: 5px;
  width: 20px;
  height: 200px;
  content: '';
}

.dots:before {
  background-image: linear-gradient(to bottom, white 1%, red 0%, red 20%, rgba(255, 255, 0, 0) 0%);
  background-position: right;
  background-size: 6px 30px;
  background-repeat: repeat-y;
  position: absolute;
  left: 15px;
  width: 20px;
  height: 200px;
  content: '';
}

div {
  padding: 10px 50px;
  width: 100px;
  height: 200px; 
}

<div class="dots">Dotted border</div>

Upvotes: 1

Art Mary
Art Mary

Reputation: 598

This is your example:

<div class="dots"></div>

And CSS:

.dots{
  width:10px;
  height:10px;
  background-color: #f3c4f8;
  position: relative;
}
.dots::before {
  content: "";
  width:10px;
  height:10px;
  background-color: #ab43ba;
  position: absolute;
  left:10px;
}

Also jsfiddle link for test.

Upvotes: 1

sayali sawant
sayali sawant

Reputation: 9

<div style="border: 2px dotted black">
</div>

Upvotes: 0

Related Questions