Comment augmenter l'espace entre les points de bordure en pointillés


287

J'utilise une bordure de style pointillé dans ma boîte comme

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

Je veux augmenter l'espace entre chaque point de la bordure.

Réponses:


445

Cette astuce fonctionne pour les bordures horizontales et verticales:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

Vous pouvez ajuster la taille avec la taille d'arrière-plan et la proportion avec les pourcentages de gradient linéaire. Dans cet exemple, j'ai une ligne pointillée de points 1px et un espacement de 2px. De cette façon, vous pouvez également avoir plusieurs bordures en pointillés en utilisant plusieurs arrière-plans.

Essayez-le dans ce JSFiddle ou jetez un œil à l'exemple d'extrait de code:


26
Doit être la réponse choisie.
Kevin Jurkowski

7
à mon humble avis, c'est un hack de n degrés.
Muhammad Umer

7
Je veux faire la même chose, mais la largeur de la bordure en pointillés est de 3 pixels au lieu de 1 px et maintenant elle devient carrée plutôt que pointillée.
Bhojendra Rauniyar

5
J'ai fait un mixage SCSS pour implémenter cela et changer rapidement les couleurs et l'espacement. Découvrez-le sur github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin .
Flor Braz

5
Et si je veux que les 4 bords soient pointillés?
Ryan Shillington

141

Voici une astuce que j'ai utilisée sur un projet récent pour réaliser presque tout ce que je veux avec des bordures horizontales. J'utilise <hr/>chaque fois que j'ai besoin d'une bordure horizontale. La façon de base pour ajouter une bordure à cette heure est quelque chose comme

 hr {border-bottom: 1px dotted #000;}

Mais si vous voulez prendre le contrôle de la frontière et, par exemple, augmenter l'espace entre les points, vous pouvez essayer quelque chose comme ceci:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

Et dans ce qui suit, vous créez votre bordure (voici un exemple avec des points)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

Cela signifie également que vous pouvez ajouter du texte-ombre aux points, dégradés, etc. Tout ce que vous voulez ...

Eh bien, cela fonctionne vraiment bien pour les bordures horizontales. Si vous en avez besoin, vous pouvez spécifier une classe pour une autre heure et utiliser la rotationpropriété CSS3 .


2
Ce cross-browser est-il compatible?
J82

57
Je ne peux pas imaginer quelle douleur dans le a ** ce serait de maintenir.
Kzqai

1
comment obtenir le même effet pour un vertical?
Rinku

4
@Rinku avec transform: rotation (90deg); bloc de visualisation;
Jeroen K

4
si moche, mais si intelligent :) Je remarque également que je peux avoir un contrôle plus fin sur le placement si je règle la hauteur: 0; et utilisez le rembourrage pour contrôler le placement. Je voulais donc la ligne pointillée sur le fond avec une petite pièce en dessous, j'ai donc utilisé un remplissage: 0 0 10px;
MatthewLee

121

Vous ne pouvez pas le faire avec du CSS pur - la spécification CSS3 a même une citation spécifique à ce sujet:

Remarque: Il n'y a aucun contrôle sur l'espacement des points et des tirets, ni sur la longueur des tirets. Les implémentations sont encouragées à choisir un espacement qui rend les coins symétriques.

Vous pouvez cependant utiliser une image de bordure ou une image d'arrière-plan qui fait l'affaire.


7
Vous pouvez utiliser des dégradés (CSS pur) pour une bordure entièrement personnalisable. Voir la réponse ci
Olivictor

3
-1, @Shadikka, Ce que dit la spécification CSS3, c'est que cela ne peut pas être fait en utilisant border: dotted, mais il est possible de le faire en utilisant des dégradés comme l'a montré la réponse d'Eagorajose.
Pacerier

30

Celui-ci utilise la bordure CSS standard et un pseudo élément + débordement: caché. Dans l'exemple, vous obtenez trois bordures en pointillés 2px différentes: normales, espacées comme un 5px, espacées comme un 10px. Est en fait 10px avec seulement 10-8 = 2px visibles.

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

Appliqué à de petits éléments avec de grands coins arrondis, cela peut créer des effets amusants.


2
Du bon travail! C'est la seule de ces réponses qui fonctionne vraiment sans être terrible à maintenir, OMI. Même la réponse acceptée ne fonctionne que pour un bord du div. Cela fonctionne pour toute la frontière.
Ryan Shillington

1
C'est de loin la meilleure et la plus élégante réponse. Devrait être marqué comme la solution ...
Beejee

19

Donc, en commençant par la réponse donnée et en appliquant le fait que CSS3 autorise plusieurs paramètres - le code ci-dessous est utile pour créer une boîte complète:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}
<div id="border">
  bordered area
</div>

Il convient de noter que la taille de 10 pixels de l'arrière-plan donne la zone que le tiret et l'écart couvriront. Le 50% de la balise d'arrière-plan est la largeur réelle du tiret. Il est donc possible d'avoir des tirets de longueur différente de chaque côté de la bordure.


17

Voir les documents MDN pour les valeurs disponibles pour border-style:

  • none: aucune bordure, définit la largeur à 0. Il s'agit de la valeur par défaut.
  • masqué: identique à «aucun», sauf en termes de résolution des conflits de frontière pour les éléments du tableau.
  • en pointillés: série de tirets courts ou de segments de ligne.
  • pointillé: série de points.
  • double: deux lignes droites qui totalisent la quantité de pixels définie comme largeur de bordure.
  • groove: effet sculpté.
  • encart: fait apparaître la boîte intégrée.
  • début: opposé à «encart». Fait apparaître la boîte en 3D (en relief).
  • crête: opposée à «rainure». La bordure apparaît en 3D (sortant).
  • solide: ligne simple, droite et continue.

En dehors de ces choix, il n'y a aucun moyen d'influencer le style de la bordure standard.

Si les possibilités ne sont pas à votre goût, vous pouvez utiliser CSS3 border-imagemais notez que la prise en charge du navigateur pour cela est encore très inégale.


merci pekka, cela signifie que je ne peux pas utiliser la propriété border ... donc je dois utiliser l'image pour cela.
Kali Charan Rajput

@kc si aucun des styles de bordure n'est à votre goût, oui.
Pekka

8

Construire une solution à 4 arêtes basée sur la réponse de @ Eagorajose avec une syntaxe abrégée:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}
<div id="page"></div>


8

C'est un sujet ancien, mais toujours très pertinent. La première réponse actuelle fonctionne bien, mais uniquement pour les très petits points. Comme Bhojendra Rauniyar l'a déjà souligné dans les commentaires, pour les points plus grands (> 2px), les points apparaissent carrés, pas ronds. J'ai trouvé cette page en recherchant des points espacés , pas des carrés espacés (ou même des tirets, comme certaines réponses ici utilisent).

Sur cette base, j'ai utilisé radial-gradient. En outre, en utilisant la réponse de Ukuser32 , les propriétés de point peuvent facilement être répétées pour les quatre bordures. Seuls les coins ne sont pas parfaits.

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}
<div>Some content with round, spaced dots as border</div>

L' radial-gradient attend :

  • la forme et la position optionnelle
  • deux arrêts ou plus: une couleur et un rayon

Ici, je voulais un point de 5 pixels de diamètre (2,5 pixels de rayon), avec 2 fois le diamètre (10 pixels) entre les points, totalisant jusqu'à 15 pixels. Le background-sizedevrait correspondre à ceux-ci.

Les deux arrêts sont définis de telle sorte que le point est agréable et lisse: noir uni pour la moitié du rayon et qu'un dégradé pour le rayon complet.


6

C'est une très vieille question mais elle a un rang élevé dans Google, donc je vais ajouter ma méthode qui pourrait fonctionner en fonction de vos besoins.

Dans mon cas, je voulais une bordure en pointillés épaisse qui avait une pause minimale entre les tirets. J'ai utilisé un générateur de motifs CSS (comme celui-ci: http://www.patternify.com/ ) pour créer un motif de 10 pixels de large par 1 px de haut. 9 pixels sont de couleur unie, 1 pixel est blanc.

Dans mon CSS, j'ai inclus ce modèle en tant qu'image d'arrière-plan, puis je l'ai mis à l'échelle en utilisant l'attribut background-size. Je me suis retrouvé avec un tiret répété de 20 pixels par 2 pixels, dont 18 pixels en trait plein et 2 pixels blancs. Vous pouvez le redimensionner encore plus pour une ligne pointillée très épaisse.

La bonne chose est que l'image est codée en tant que données, vous n'avez pas la demande HTTP externe supplémentaire, donc il n'y a pas de charge de performance. J'ai stocké mon image en tant que variable SASS afin de pouvoir la réutiliser dans mon site.



2

Tant de gens disent "Vous ne pouvez pas". Oui, vous pouvez. Il est vrai qu'il n'y a pas de règle CSS pour contrôler l'espace de gouttière entre les tirets mais CSS a d'autres capacités. Ne soyez pas si rapide à dire qu'une chose ne peut pas être faite.

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

Fondamentalement, la hauteur du bord supérieur (5px dans ce cas) est la règle qui détermine la "largeur" ​​de la gouttière. Si vous devez bien sûr ajuster les couleurs en fonction de vos besoins. C'est aussi un petit exemple pour une ligne horizontale, utilisez gauche et droite pour faire la ligne verticale.


1
Pour être juste, je pense que la plupart des gens disent que vous ne pouvez pas le faire à la question littérale de régler le style en pointillé de la bordure. Ils ne disent pas que quelque chose de similaire n'est pas possible en utilisant d'autres propriétés CSS. À mon avis, il est beaucoup plus logique d'un point de vue sémantique d'utiliser une image d'arrière-plan ou une image de bordure comme d'autres l'ont montré, que d'utiliser des pseudo-éléments et une douzaine de lignes de CSS.
Alex

2

J'ai fait une fonction javascript pour créer des points avec un svg. Vous pouvez ajuster l'espacement et la taille des points dans le code javascript.

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();
div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}
<div class="dotted">Lorem Ipsum</div>


1

SI vous ne ciblez que les navigateurs modernes ET que vous pouvez avoir votre bordure sur un élément distinct de votre contenu, vous pouvez utiliser la transformation d'échelle CSS pour obtenir un point ou un tiret plus grand:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

Il faut beaucoup de réglages de position pour l'aligner, mais cela fonctionne. En modifiant l'épaisseur de la bordure, la taille de départ et le facteur d'échelle, vous pouvez obtenir à peu près le rapport épaisseur-longueur souhaité. La seule chose que vous ne pouvez pas toucher est le rapport tiret-écart.


Ce faisant, le contenu sera également appliquéscale(8)
Pardeep Jain

bordure: 1px en pointillé noir; est considéré comme une propriété inconnue dans le navigateur Chrome.
Inzmam ul Hassan

1
<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

c'est ce que j'ai fait - utilisez une image entrez la description de l'image ici


0

AFAIK il n'y a pas moyen de le faire. Vous pouvez utiliser une bordure en pointillés ou peut-être augmenter légèrement la largeur de la bordure, mais obtenir des points plus espacés est impossible avec CSS.


0

Vous pouvez créer une toile (via javascript) et dessiner une ligne pointillée à l'intérieur. Dans le canevas, vous pouvez contrôler la durée du tiret et l'espace entre les deux.


C'est une solution très compliquée. Je ne peux pas m'empêcher de penser que cela coûterait également un peu plus de performances et de temps de chargement perçus, en fonction du poids du reste du JS sur la page.
Emmett R.
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.