[SOLVED] How can I prevent the border from showing up in the top corners of the image when using border-image?

How can I prevent the border from showing up in the top corners of the image when using border-image?

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --fall-back-font: "Segoe UI", "Lucida Sans", Verdana, Helvetica, Arial,
    sans-serif;
  --main-color: #10cab7;
  --sub-color: #2c4755;
  --sub-two-color: #f6f6f6;
  --main-size: 3.21rem;
  --sub-size: 1.25rem;
  --line-height: 2rem;
  --main-transition-delay: 0.3s;
  --main-border-radius: 5px;
}

html {
  scroll-behavior: smooth;
}

body {
  height: 100vh;
  height: 100svh;
}

/*? container component :
 - center content in the center of teh page in desktop
 */
.container {
  width: clamp(20.7rem, 85vw, 80rem);
  margin: 0 auto;
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  justify-content: center;
  padding-block: 6rem;
}

.articles > * {
  border-radius: var(--main-border-radius);
}

.articles img {
  display: block;
  max-width: 100%;
  border-bottom: solid 3px;
  border-top-right-radius: var(--main-border-radius);
  border-top-left-radius: var(--main-border-radius);
  -webkit-border-image: linear-gradient(to left, red, blue) 27 / 35px;
  -moz-border-image: linear-gradient(to left, red, blue) 27 / 35px;
  -ms-border-image: linear-gradient(to left, red, blue) 27 / 35px;
  border-image: linear-gradient(to left, red, blue) 1 / 30px;
  overflow: hidden;
}

.articles .article-desc {
  flex: 1 1 auto;
  padding: 2rem;
  border-bottom-left-radius: var(--main-border-radius);
  border-bottom-right-radius: var(--main-border-radius);
  box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.306);
}

.articles .article-desc h4 {
  font: 800 calc(var(--sub-size)) "Work Sans", var(--fall-back-font);
  line-height: var(--line-height);
  color: rgb(254, 176, 202);
  text-decoration: underline;
  text-decoration-thickness: 0.15rem;
  text-decoration-color: #d1febb;
  text-underline-offset: 0.05rem;
  text-shadow: 1px 0px 15px #fdccef;
  margin-bottom: 1rem;
}

.articles .article-desc p {
  font: 300 calc(var(--sub-size) - 0.4rem) / 1.2rem "Work Sans",
    var(--fall-back-font);
  color: rgb(134, 89, 120);
}

.article-desc > * {
  width: -moz-fit-content;
  width: fit-content;
}

<div class="articles container">
  <div class="article-2">
    <img src="https://cdn.pixabay.com/photo/2017/04/14/16/29/workplace-2230698__340.jpg" alt="services">

    <div class="article-desc">
      <h4>
        Graphic Design
      </h4>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis
        eveniet
        expedita numquam pariatur tempora.</p>
    </div>
  </div>
</div>

I'm using border-image to add a linear gradient border to the bottom of an image. However, the top corners of the image are also showing the border, even though I only want it to appear on the bottom. Here's an image that illustrates the problem:

I've applied the following CSS to the image container:

see : https://codepen.io/ISsamDev99/pen/ExedPvx

.articles img {
    display: block;
    max-width: 100%;
    border-bottom: solid 3px ;
    border-top-right-radius: var(--main-border-radius);
    border-top-left-radius: var(--main-border-radius);
    border-image: linear-gradient(to left ,red, blue) 27 / 30px;
}

I expected the border to only appear on the bottom of the image, with the top corners of the image being unaffected.

Solution

Define a width for the border-image as well that removes it from top/left/right

border-image-width: 0 0 30px 0;