how to make css border not affecting the area of content

i have a grid item (instagram button) that have instagram color gradient (using css) as the background but it doesnt fully cover the whole element because i used border-top.

.instagram{
      border-top: 1px solid rgba(156, 156, 156, 0.486);
      background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
   }

gradient not fully covering the grid item because of border

i tried background-attachment: fixed.

and outline is out of question because it will give outline to all sides (only need top side). is there a way for it to make the gradient full while keeping the border-top? or any workaround. thanks!

Solution

Pseudoelement can always solve problem like this.

Remove the border-top from your .instagram div.
Make that div relatively positioned (position: relative;) to allow it to accept an absolutely positioned child, which is the number 3 below.
Create an ::after or ::before pseudoelement for your .instagram div. Give it position:absolute; so that its dimension can be freely adjusted relative to the parent, make its content blank (content: ' ';) because we only need its border top, set its left, top, width, and height so that it attaches firmly to .instagram, and give it the border top.

.instagram {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 150px;
  background: -webkit-radial-gradient(
    30% 107%,
    circle,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  background: -o-radial-gradient(
    30% 107%,
    circle,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  background: -webkit-radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

.instagram::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-top: 10px solid rgba(156, 156, 156, 0.486);
  border-radius: 150px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Admin Dashboard</title>
  </head>
  <body>
    <div class="instagram"></div>
  </body>
</html>