Put h2 and p tag in the same border-CodePudding

I want to put my "h2" and "p" tag in the same border, I've already tried but I can do it for only one tag, when I tried to separate them with a comma they are put in separate borders, and I want to include them in the same border but I don't know how to do it. How should I proceed, any help would be welcome, please.

Below is my code:

h3,p {  
  border-color: #1E88E5;  
  border-width: 2px;  
  border-style:solid;
  border-radius: 5px;
  background-color: #f6fbfd;
  }

<h3>LOREM IPSUM</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

CodePudding user response：

Instead of putting border for both the elements separately, You can add a parent div as a wrapper for both the elements and applied border style in that parent div.

Demo :

.custom-border {  
  border-color: #1E88E5;  
  border-width: 2px;  
  border-style:solid;
  border-radius: 5px;
  background-color: #f6fbfd;
}

<div >
  <h3>LOREM IPSUM</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

CodePudding user response：

you can simply just wrap this up in a div and give it any id or class and apply the styling to that div.

#div-name{  
  border-color: #1E88E5;  
  border-width: 2px;  
  border-style:solid;
  border-radius: 5px;
  background-color: #f6fbfd;
  }

<div id="div-name">
  <h3>LOREM IPSUM</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

CodePudding user response：

There are two obvious approaches you could take, the first is the easiest and simply requires wrapping the elements you wish to share a border with a common parent element, such as an <section>:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

section {
  width: 60%;
  margin: 1em auto;
  border-color: #1E88E5;
  border-width: 2px;
  border-style: solid;
  border-radius: 5px;
  background-color: #f6fbfd;
}

<section>
  <h3>LOREM IPSUM</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

The alternative is to remove the bottom, and top, borders respectively of the <h3> and the <p> element, as well as the border-radius on the corners which are 'joined':

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

h3,
p {
  width: 60%;
  margin: 1em auto;
  border-color: #1E88E5;
  border-width: 2px;
  border-style: solid;
  border-radius: 5px;
  background-color: #f6fbfd;
}

h3 {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

h3 p {
  border-top-color: transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

<h3>LOREM IPSUM</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</p>

The most obvious problem with this latter approach is the sheer amount of extra CSS it takes to override the border details on the elements you wish to "join" together, also if you look closely you can see a notch where the 45° border-join occurs, which is aesthetically unpleasant in most situations.