Question 220913 in Html Question posted in
Some basic documentation can be found here.

How can I add a border that sits behind a grid stack with HTML & CSS?

I’m trying to figure out how to accomplish this design. The image had a grid stack with a border that allow the grid to sort of pop off the page.

Grid items with a red border behind them

body {
  margin: 0;
  padding: 0;
}

.contact-form-container {
  position: relative;
  width: 50%;
}

.contact-form {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-form:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid red;
  z-index: -1;
  border-radius: 10px;
}
<div class="contact-form-container">
  <form class="contact-form">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>
Tags:

4

Answers


  1. 0

    You can do that by adding an after element to the grid container and placing it under the content.

    Login or Signup to reply.
  2. 0

    Your code sample seems to do this just fine already. The only changes I made was to center the .contact-form-container and the adjust the specific positions on the ::before selector

    body {
  margin: 0;
  padding: 0;
}

.contact-form-container {
  position: relative;
  margin: 20px auto 0 auto;
  width: 50%;
}

.contact-form {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-form:before {
  content: "";
  position: absolute;
  top: 5px;
  left: -20px;
  right: -20px;
  bottom: 5px;
  border: 3px solid red;
  z-index: -1;
  border-radius: 10px;
}
    <div class="contact-form-container">
  <form class="contact-form">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>
    Login or Signup to reply.
  3. 0

    You’re already pretty close to the answer.

    The issue is that you’re using -10px for the top and the bottom values. That means it’s going out (away) from the element that it’s supposed to go behind. That is why this works for the left and right. If you set the top and bottom be 10px it will go in and be behind the item.

    body {
    display: grid;
    height: 100vh;
    margin: 0;
    place-items: center;
}

.contact-form-container {
  position: relative;
  width: 50%;
}

.contact-form {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-form:before {
  content: "";
  position: absolute;
  top: 10px;
  left: -10px;
  right: -10px;
  bottom: 10px;
  border: 3px solid red;
  z-index: -1;
  border-radius: 10px;
}
    <div class="contact-form-container">
  <form class="contact-form">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>
    Login or Signup to reply.
  4. 0

    This should work. I added display grid and a column schema while slightly modifying the top and bottom position of the before element. Also make sure the form doesnt have a color

    For the record you were nearly there

    body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-form-container {
  position: relative;
  width: 50%;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-form:before {
  content: "";
  position: absolute;
  top:  30px;
  left: -10px;
  right: -10px;
  bottom:  30px;
  border: 3px solid red;
  z-index: -1;
  border-radius: 10px;
}
    <div class="contact-form-container">
  <form class="contact-form">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search