I am trying to give border radis in button but it is not working

Question

HTML

As you can see in this html code I created one class and in that class I gave anchor tag.

Here I gave css to make button but my border-radius css cant not work .

.instagram_button a {
  font-weight: 500;
  font-size: 20px;
  line-height: 19px;
  color: white;
  padding: 18px 35px;
  background: black;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid transparent;
  border-image: linear-gradient(to right, #6610f2, #FF6600);
  border-image-slice: 1;
}

<div class="instagram_button">
  <a href="#">more photos</a>
</div>

I don't know that's why i asked this question. – kishan0196 May 05 '22 at 09:22 — kishan0196, May 05 '22 at 09:22

score 0 · Answer 1 · answered May 05 '22 at 11:01

I found this online and it looks ok. but the border is not an image, they're actually colors, and the good thing is that you can play with as many colors as you want to make it look as you wish.

I commented all your border styles and posted it under your code, hope this will help :

.instagram_button a {
  font-weight: 500;
  font-size: 20px;
  line-height: 19px;
  color: white;
  padding: 18px 35px;
  background: black;
/*   border-radius: 30px; */
  text-decoration: none;
  display: inline-block;
/*   border: 2px solid transparent; */
/*   border-image: linear-gradient(to right, #6610f2, #FF6600); */
/*   border-image-slice: 1; */

  
  border:3px solid #0000;
  border-radius:30px;
  background:
    linear-gradient(black,black) padding-box,
    linear-gradient(blue,red,orange,green) border-box;
}

I am trying to give border radis in button but it is not working

1 Answers1