Dotted top and bottom border shorter than text

Question

I want to achieve border top and bottom like below image how can I achieve with CSS tricks?

Chall

Answer 1

Here is another approach using radial-gradient background image to produce the dots at the top and bottom. The output is responsive and the no. of dots at the top and bottom are determined by the width (for example, width: 108px produces 9 dots as background-size in x-axis is 12px).

The advantage of this approach over the others is that this allows greater control over the size of the dots and the space in between the dots. The downside is the browser support for radial-gradient which is lower (IE10+) compared to dotted border method.

h1 {
  position: relative;
  text-align: center;
  font-size: 48px;
  line-height: 1em;
  padding: 0.625em;
  font-family: Calibri;
  font-weight: 100;
}
h1:after {
  position: absolute;
  content: '';
  width: 108px;  /* multiples of background-size in X-axis */
  height: 100%;
  top: 0px;
  left: calc(50% - 50px);
  background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: 50% 0.125em, 50% 2em;
}
/* Just for demo */

body {
  background: rgb(9, 133, 143);
  color: white;
}

How it works

How it works with long text

Screenshot with large dots:

---

All that is needed to be done to make the dots smaller in size is to reduce the color-stop percentages of the radial gradient. The smaller the percentages, the smaller the dots.

h1 {
  position: relative;
  text-align: center;
  font-size: 48px;
  line-height: 1em;
  padding: 0.625em;
  font-family: Calibri;
  font-weight: 100;
}
h1:after {
  position: absolute;
  content: '';
  width: 108px;  /* multiples of background-size in X-axis */
  height: 100%;
  top: 0px;
  left: calc(50% - 50px);
  background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: 50% 0.125em, 50% 2em;
}

/* Just for demo */

body {
  background: rgb(9, 133, 143);
  color: white;
}

How it works

How it works with long text

Screenshot with smaller dots: