Ninja Ninja - 5 months ago 18
HTML Question

put a border around header and paragraph

I am trying to put a single border around the header and paragraph. Currently I have two separate border around the header and the paragraph. How can I put a single border around them?

<style type="text/css">
h1{
font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
p{
font-family: Consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
</style>

<h1>Hello</h1>
<p>World</p>

Answer

Like Harry suggested above, simply add them inside a wrapper and set your styling on the wrapper instead. Like so:

div {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}
<div>
  <h1>Hello</h1>
  <p>World</p>
</div>


Alternatively, if you cannot or don't want to change your markup, you could simply remove the bottom left and right border and border-radius for your h1 element, and also remove the top left and right border and border-radius for your p element. This will also yield the appearance you're looking for.

h1, p {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
  margin: 0;
  padding: 10px 0;
}

h1 {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

p {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
  <h1>Hello</h1>
  <p>World</p>