CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 3368

Getting border to wrap around entirety of element

I am creating a link that looks like a button. One thing I am running into is if I have more than one word for the anchor the link/button text is going to the next line. It is fine if the anchor text goes to the next line, but the border then does not wrap around the entire thing. It looks as if the border breaks (not sure of the correct terminology).

See the image below for a reference: (Sorry image upload keeps failing)

Does anyone know how I can

.container {
  width: 40%;
  background: gray;
 } 
.mainLinkWrapC {
  width: 80%;
  margin: 50px auto;
  display: block;
  text-align: center;
}
.mainLink {
  text-decoration: none;
  font-family: 'Muli', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  padding: 15px 10px;
  line-height: 1.4em;
  color: #b82222;
  border: 2px solid #b82222;
}
<div class="container">
  <div class="mainLinkWrapC">
    <a href="#" class="mainLink">Hard Guarding Solutions</a>
  </div>
</div>

Upvotes: 1

Views: 59

Answers (1)

Toan Lu
Toan Lu

Reputation: 1239

You just need to set display: block to your .mainLink

.container {
  width: 40%;
  background: gray;
 } 
.mainLinkWrapC {
  width: 80%;
  margin: 50px auto;
  display: block;
  text-align: center;
}
.mainLink {
  text-decoration: none;
  font-family: 'Muli', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  padding: 15px 10px;
  line-height: 1.4em;
  color: #b82222;
  display: block;
  border: 2px solid #b82222;
}
<div class="container">
  <div class="mainLinkWrapC">
    <a href="#" class="mainLink">Hard Guarding Solutions</a>
  </div>
</div>

Upvotes: 3

Related Questions