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

You can use box-shadows also to achieve this, first create an after psuedo-element on top and a before pseudo-element on bottom then give the two of the box-shadows

body{
	background:#09858F;
}

div{
	position:relative;
	display:inline-block;
	margin:100px;
}
h1{
	text-align:center;
	font-family: Calibri;
	font-size:50px;
	color:#fff;
	margin:50px;
}

h1:after{
	content:"";
	position:absolute;
	left:30%;
	height:10px;
	width:10px;
	background:yellow;
	top:20%;
	border-radius:50%;
	box-shadow:20px 0 0 0  yellow,40px 0 0 0  yellow,60px 0 0 0  yellow,80px 0 0 0  yellow,100px 0 0 0  yellow,120px 0 0 0  yellow,140px 0 0 0  yellow,160px 0 0 0  yellow;
}
h1:before{
	content:"";
	position:absolute;
	left:30%;
	height:10px;
	width:10px;
	background:yellow;
	bottom:20%;
	border-radius:50%;
	box-shadow:20px 0 0 0  yellow,40px 0 0 0  yellow,60px 0 0 0  yellow,80px 0 0 0  yellow,100px 0 0 0  yellow,120px 0 0 0  yellow,140px 0 0 0  yellow,160px 0 0 0  yellow;
}

<div><h1>How it Works</h1></div>

Answer 2

I made a few changes in your CSS:

h1{
    text-align: center;
    font-size: 70px;
}

h1:before, h1:after{
    position: relative;
    content: "";
    width: 30%;
    left: 35%;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 5px dotted yellow;
}

DEMO

EDIT:

If you want a fixed width you can add:

h1:before, h1:after{
    width: 150px;     /* You can change this value */
    left: 50%;
    transform: translateX(-50%);
}

DEMO2

Answer 3

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;
}

<!-- library included to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h1>How it works</h1>

<h1>How it works with long text</h1>

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;
}

<!-- library included to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h1>How it works</h1>

<h1>How it works with long text</h1>

Screenshot with smaller dots: