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

Html – 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!

Tags:

2

Answers


  1. 0

    why you need top border?
    if you need divider on top than that will be visible, and you need gradient in full container then just make border 0.

    Login or Signup to reply.
  2. 0

    Pseudoelement can always solve problem like this.

    1. Remove the border-top from your .instagram div.
    2. Make that div relatively positioned (position: relative;) to allow it to accept an absolutely positioned child, which is the number 3 below.
    3. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search