Creating a square dotted border is easy

I am trying to create a square-spaced dotted border. Can someone please explain how to make those dots appear square?

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

Below is the code I have been working on. Any assistance would be greatly appreciated.

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

Answer №1

Here is an example for you:

<div class="circles"></div>

Accompanied by the following CSS:

.circles{
  width:20px;
  height:20px;
  background-color: #82b1ff;
  position: relative;
}
.circles::before {
  content: "";
  width:20px;
  height:20px;
  background-color: #3366cc;
  position: absolute;
  left:20px;
}

Feel free to test it out using this jsfiddle link.

Answer №2

Your CSS has been updated and may need some tweaking :)

.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">Custom Dotted border</div>

Answer №3

<div style="border: 3px dashed red">
</div>

Answer №4

Here is a new, easy method that works across most browsers that I'd like to share.

'dotted' doesn't work consistently across all browsers! The 'dotted' border style appears round in Firefox and square in Chrome, with strange behavior during resizing.

  1. Create a simple SVG file with two colors represented as square 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 also 8 so the image is squared, making it easier to manipulate.

  1. Save the file as an .svg and upload it to your hosting server to be used with border-image.

Simply paste the code into your editor and save it as an .svg file.

  1. The CSS styling:
.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 applies to top border - remove for others
  border-top-width: 10px; 
  border-style: solid;
}

Result (top of a footer):

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

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

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

What is the method for locating a particular link within a concealed row of a table solely based on linkText/linkName, without resorting to css-selectors or xpath?

Looking for a unique link in a dynamic table Each row in the table expands to reveal more information when clicked. However, since the rows and IDs are constantly changing, finding a specific link by its text is challenging without using xpath. Attempts ...

javascriptjavajquerycssselenium-webdriver

What is the best way to implement the nth:child selector in conjunction with the each function for handling JSON data in

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flickr Feed</title> <link href="../_css/site.css" rel="stylesheet"> <link rel="stylesheet" type= ...

jqueryhtmljson

What is the process for implementing the sticky table header jQuery plugin?

I am looking to implement a sticky header on all tables in my web application, which is built on PHP. As the amount of data continues to grow, search results are fetching more records that may not be visible. I am primarily a PHP programmer and do not have ...

javascriptjqueryhtml

Concentrate on user input in PHP programming

My goal is to create a PHP validation form where errors are displayed correctly every time. However, I am encountering an issue with setting focus on the input field with an error if one occurs. I have variables like $rut_error, $first_name_error, $last_na ...

phphtmlfocus

Is it possible to convert a list-group into a dropdown menu using Bootstrap 4?

I'm currently using the latest version of Bootstrap 4 and facing a challenge with making my 'list-group' responsive. Despite searching for solutions, I have yet to find one that fits my specific needs. The 'list-group' is intended ...

htmlcssresponsive-designbootstrap-4

Is there a method for creating a unique file name automatically during the upload process?

I recently created a website where users can upload various files. However, as a newcomer to web development, I am struggling with generating random file names for uploads. Despite trying multiple code snippets, nothing seems to work. Below is the code I&a ...

phphtml

Display a popup div while communicating with an AJAX server

As I work on my website's interaction with my AJAX server, I am looking to display a central popup on the screen. Since some tasks take a few seconds to complete, I want to visually indicate to users that an operation is in progress. For example, cons ...

javascripthtmlajaxjquerypopup

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

Is it possible to modify the color of an input tag in a form when it is selected?

I'm currently developing a contact form for my website with bootstrap. The form automatically scrolls to any unfilled required field when the user clicks submit, and highlights it with a blue border. However, I want the border color to change to red i ...

htmlcssformscolorsbootstrap-4

Unforeseen outcomes discovered by stacking one div over another, all without relying on z-index

My current project involves two stacked divs, each measuring 100px by 100px. The bottom div includes a black border on top, as shown in this example. <div id="top"></div> <div id="bottom"></div>​ div { width: 100px; height ...

csscss-floatpositionz-index

Implement a sequence of animations within a div using jQuery

My goal is to create an animation effect for each div element within a row when the user scrolls down to that specific point on the page. The layout consists of three <div> elements in the same row. The structure of the HTML code is as shown below: ...

javascriptjqueryhtmlanimation

How can JavaScript onClick function receive both the name and value?

My current challenge involves a function designed to disable a group of checkboxes if they are not checked. Originally, this function was set to work onClick(), with one argument being passed from the checkbox element. Now, I need this function to be trigg ...

javascripthtmlcheckboxcoldfusion-9

Is there a way to display list items in rows of three?

I just bought this theme and I'm looking to customize it so that only three items appear in a row on the homepage instead of four. Can this be achieved with CSS or JQuery? Here is the link to the theme: Here is the link Is it possible to use CSS to c ...

jquerycsswordpress

Transform the color of links in a Sankey diagram on Google upon clicking a node

Currently, I am in the process of creating a Sankey diagram using Google charts. As of now, I have implemented the following CSS: svg path:hover { fill: red; } However, I have noticed that this code only changes the color of the links when hovering over ...

javascripthtmlcssgraphgoogle-visualization

Which CSS 3 transition prefixes are recommended for optimal performance?

I'm curious about the CSS vendor prefixes needed for transitions. One source mentions that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)". Another page only displays the -webkit- and -moz- pre ...

csscss-transitionstransition

Get a polished look using HTML and CSS exclusively

Allow me to illustrate what I am intending to accomplish with an example. div{ width:100px;height:100px; border:3px solid #900; border-radius:0px 0px 140px 0px; } <div></div> I am seeking a method to ...

htmlcss

Mathjax3 causing bootstrap columns to become overwhelmed

Currently, I am utilizing MathJax3 in conjunction with Bootstrap4. It seems that the feature of automatic line breaking has not yet been incorporated into MathJax3. The code snippet below showcases a layout consisting of 3 columns: a left spacing column, ...

htmlcssbootstrap-4mathjax

Footer at the bottom and a sticky navigation bar

I have experimented with various CSS guides in order to place the footer at the bottom of the page, and I have found the example below to be the simplest method. html, body, #root { height: 100%; } #root { display: flex; flex-direction: column; } ...

htmlcss

How to Fetch Information from Database and Save it as a Variable in PHP

I am trying to extract the data stored in the level column of my database and assign it to a variable with the value 0. Here is the code snippet I have written to achieve this, where I fetch the data from the database and store it in a variable named $lev ...

phphtmlmysqlcssdatabase

Puppeteer's flawed performance leads to the generation of low-quality

Currently, I am utilizing puppeteer to generate a PDF from my static local HTML file. However, the resulting PDF is turning out to be corrupted. When attempting to open the file using Adobe Reader, an error message pops up stating 'Bad file handle&apo ...

javascripthtmlnode.jspdfpuppeteer