Home How to make a border going left and right like a snake around my articles list?

Questions

How to make a border going left and right like a snake around my articles list?

August 18, 2022

I want to make a line that go around my articles like a snake that go left and right.
To achieve that, I have tried the code below :

.article-container{
    padding: 10px;
    border-top: 5px solid #df9b35;
    border-bottom: 5px solid #df9b35;
}


.article-container.left{
      border-left: 5px solid #df9b35;
      padding-left: 30px;
      border-radius: 50px 0 0 50px;
}


.article-container.right{
      border-right: 5px solid #df9b35;
      padding-right: 30px;
      border-radius: 0 50px 50px 0;
}

<section>
  <div class="article-container left">
    <article>
      <header>
        <h1>Article 1</h1>
        <time datetime="2022-08-18 15:55">18 August</time>
      </header>
      <p>Short description here</p>
    </article>
  </div>
  <div class="article-container right">
    <article>
      <header>
        <h1>Article 2</h1>
        <time datetime="2022-08-18 16:00">18 August</time>
      </header>
      <p>Short description here</p>
    </article>
  </div>
  <div class="article-container left">
    <article>
      <header>
        <h1>Article 3</h1>
        <time datetime="2022-08-18 16:05">18 August</time>
      </header>
      <p>Short description here</p>
    </article>
  </div>
</section>

But as you can see, the problem here is that the border continue all along the container and don’t stop before the next border radius. So, I don’t have the continuous line that I’m searching for.

>Solution :

A neat way to make this work would be to make use of pseudo-elements like ::before or ::after in which you could display the border with an offset on the sides that you simply can’t achieve when relying on the box-model.

It would look like this:

.article-container {
  position: relative;
  padding: 10px;
}

.article-container:not(:last-child) {
  margin-bottom: -5px;
}

.article-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-top: 5px solid #df9b35;
  border-bottom: 5px solid #df9b35;
}

.article-container.left {
  padding-left: 30px;
}

.article-container.left::before {
  right: 50px;
  left: 0;
  border-left: 5px solid #df9b35;
  border-radius: 50px 0 0 50px;
}

.article-container.right {
  padding-right: 30px;
}

.article-container.right::before {
  left: 50px;
  right: 0;
  border-right: 5px solid #df9b35;
  border-radius: 0 50px 50px 0;
}

<section>
  <div class="article-container left">
    <article class="card-container time-item">
      <header>
        <h1>Article 1</h1>
        <time datetime="2022-08-18 15:55">18 August</time>
      </header>
      <p>Short description here</p>
    </article>
  </div>
  <div class="article-container right">
    <article class="card-container time-item">
      <header>
        <h1>Article 2</h1>
        <time datetime="2022-08-18 16:00">18 August</time>
      </header>
      <p>Short description here</p>
    </article>
  </div>
  <div class="article-container left">
    <article class="card-container time-item">
      <header>
        <h1>Article 3</h1>
        <time datetime="2022-08-18 16:05">18 August</time>
      </header>
      <p>Short description here</p>
    </article>
  </div>
</section>

The relative positioning on all of the .article-container is critical for this to work and the negative bottom margin makes it so that the top and bottom borders are aligned.