How can I make the borders show? It's not showing-CodePudding

I have encountered an issue, that for my grid elements, borders are not showing? Here is my code:

.offers {
  display: grid;
  grid-template-columns: 32% 33% 32%;
  grid-column-gap: 20px;
}

.offers div {
  border-width: 10px;
  border-color: black;
  background-color: white;
}

.abouttext {
  color: black;
  font-size: 100px;
  text-align: right;
  margin: 0px;
  margin-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div >
  <div>
    <h3>Access To A Massive Library Of Education</h3>
    <p>With Summit you get an unlimited selection of indepth, engaging content for free.</p>
  </div>
  <div>
    <h3>No Extra Payed Upgrades</h3>
    <p>Summit says no to any extra add-ons or premium upgrades with pay walls. Everything is all free and hassle free.</p>
  </div>
  <div>
    <h3>We Are Advert Free</h3>
    <p>We all hate adverts, especially when we are engaged in content. Summit is happy to inform you that we are advert free!</p>
  </div>
</div>

Thanks for reading this, I know its long and tedious, so if you want my repl code, here it is (no edit perms): https://replit.com/join/mrmggxewvv-tahaparacha1

Thanks once again!

CodePudding user response：

You don't set border style. Just write border-style:solid for example.

CodePudding user response：

You can simple use shorthand border: 3px solid red; insted of border-width: 10px; border-color: black; and you missed border-style: solid; like that:

.offers {
  display: grid;
  grid-template-columns: 32% 33% 32%;
  grid-column-gap: 20px;
}

.offers div {
  border: 3px solid red;
   /* border-width:3px;
  border-color:red;
  border-style:solid; */
  background-color: white;
}

.abouttext {
  color: black;
  font-size: 100px;
  text-align: right;
  margin: 0px;
  margin-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div >
  <div>
    <h3>Access To A Massive Library Of Education</h3>
    <p>With Summit you get an unlimited selection of indepth, engaging content for free.</p>
  </div>
  <div>
    <h3>No Extra Payed Upgrades</h3>
    <p>Summit says no to any extra add-ons or premium upgrades with pay walls. Everything is all free and hassle free.</p>
  </div>
  <div>
    <h3>We Are Advert Free</h3>
    <p>We all hate adverts, especially when we are engaged in content. Summit is happy to inform you that we are advert free!</p>
  </div>
</div>

CodePudding user response：

You haven't specified a border style.

Try replacing your border styles with this:

border: 10px solid #000;

See below:

.offers {
  display: grid;
  grid-template-columns: 32% 33% 32%;
  grid-column-gap: 20px;
}

.offers div {
  border: 10px solid #000;
  background-color: white;
}

.abouttext {
  color: black;
  font-size: 100px;
  text-align: right;
  margin: 0px;
  margin-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div >
  <div>
    <h3>Access To A Massive Library Of Education</h3>
    <p>With Summit you get an unlimited selection of indepth, engaging content for free.</p>
  </div>
  <div>
    <h3>No Extra Payed Upgrades</h3>
    <p>Summit says no to any extra add-ons or premium upgrades with pay walls. Everything is all free and hassle free.</p>
  </div>
  <div>
    <h3>We Are Advert Free</h3>
    <p>We all hate adverts, especially when we are engaged in content. Summit is happy to inform you that we are advert free!</p>
  </div>
</div>

CodePudding user response：

Add border-style property in your class div;

E.g border-style: solid;