Add text between full border CSS

Question

I'm trying to recreate this:

I've got as far as adding a border, I know how to break a border with content when it's just one border i.e. bottom border, however, I'm stumped when it comes to breaking this when the border is all round.

Code so far:

.sharebox {
  display: block;
  float: left;
  background: #fff;
  width: 100%;
  padding-bottom: 0px;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  margin: 30px 25px 10px 0px;
  border: 2px solid #777;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
}

<div class="sharebox">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
</div>

Is it possible to do this in just CSS or even with JS, or will I have to use an image? It needs to be responsive too if possible.

score 3 · Accepted Answer · answered May 30 '18 at 16:42

3

You could easily use the <fieldset> and <legend> elements to do this:

legend {
  text-align: center;
}

<fieldset>
  <legend>Share with your friends</legend>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
</fieldset>

answered May 30 '18 at 16:42

j08691

204,283
31
260
272

1

["The fieldset element represents a set of form controls optionally grouped under a common name."](https://www.w3.org/TR/html/sec-forms.html#the-fieldset-element) For the provided example of social media buttons this might be appropriate-ish, but in the general case I wouldn't recommend those elements, even though they get most of the way there with default styles. – zzzzBov May 30 '18 at 16:47
Note that this puts the title in the centre of the top border in Chrome, but not in Firefox or Edge. For those browsers, one would have to use the obsolete legend attribute `align="center"` – Alohci May 30 '18 at 17:00
1

Hmm, interesting - never used this before. Great answer. – MonkeyFace May 31 '18 at 10:26

score 0 · Answer 2 · answered May 30 '18 at 17:00

You can add the text using pseudo-elements, and to break the border line set it's background color.

.sharebox {
  display: block;
  float: left;
  background: #fff;
  width: 100%;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  margin: 30px 25px 10px 0px;
  border: 2px solid #777;
  padding: 20px;
  position: relative;

}

.sharebox:before{
  content:'Some text in here.';
  padding:0 10px;
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  background:white;
}

<div class="sharebox">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
</div>

Add text between full border CSS

2 Answers2