Square brackets with CSS

Question

I wish to create a [ and ] bracket just with CSS. Is there a way to specify the top and bottom border (Without slicing the image) so it looks like a br

Answer 1

You can draw square brackets without the use of any pseudo elements in pure css.

Steps:

• Create an element like
  or and make it an inline-block so that its length becomes dependent on its content i.e length of this element will be as long as content inside it.
• Apply left / right borders.
• Use linear-gradient() to create 4 background images with specific width / height and draw on each corner of the box with background-position. The height factor of background-size should be equal to border-left-width.

Necessary CSS:

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
                    // ^^^ This value should be equal to width of left OR right border.
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

Useful Resources:

• Linear Gradient: MDN, W3.

• Background Image: MDN, W3.

Output Image:

* {box-sizing: border-box;}

body {
  background: linear-gradient(white, silver);
  min-height: 100vh;
  margin: 0;
}

.widget-title {
  font: 20px/26px Arial, sans-serif;
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb);
  
  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  text-align: justify;
  border-width: 0 3px;
  display: inline-block;
  vertical-align: top;
  padding: 5px 15px;
  margin: 20px;
}

WHAT’S NEW

This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence...