W3C home > Mailing lists > Public > www-style@w3.org > June 2016

[css3-background] More options for dashed and dotted borders

From: Praveen Puglia <praveenpuglia@gmail.com>
Date: Wed, 8 Jun 2016 14:47:09 +0530
Message-ID: <CANfatsqfkxEz6V05nbt7BjUt=gMQi-aQ_puWcXkeETVTZFKBng@mail.gmail.com>
To: www-style list <www-style@w3.org>
Currently, when we create a dotted or dashed border, the only things we can
modify are the width of the border and the color of it. There is no way we
can control what the distance should be between dots or dashes. It all
depends on the browser vendors and how they render them.

It is, however, often necessary to tweak those to get a better suited
borders. Example:

1. Varied distances between dashes/dots

Instead of a border like this...
- - - - - - - - - - - - - - - - -
a border like this...
-  -  -  -  -  -  -  -  -  -  -  -
or
-    -    -    -    -    -    -    -

2. Circular dots for dotted borders. Way to create
●●●●●●●●●●●●●●●●●●●●●
Instead of just this...
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■


Right now, the only way to accomplish these is to use border-image which
isn't really flexible for changing things on the fly. Each style would need
a new image to be made. Otherwise use gradients to emulate these which
doesn't take part into box-model calculations as border does.

How about introducing new properties/values to address these? For example

*border-separation : *which could take a *<length> *value and adjust the
distance between two dashes/dots.

A new border-style value:* dotted-round* or *dotted-circle* or a better
name ?

This is probably my first proposal of some sort so please advice me if I
need to include more details or format the emails in a different way.

-- 
Cheers!
Praveen ◉ praveenpuglia.com ◉ @praveenpuglia
<https://twitter.com/praveenpuglia>
Received on Wednesday, 8 June 2016 09:17:56 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:47 UTC