How to apply in CSS3 edges rounded with gradient

Question

How to apply in CSS3 edges rounded with gradient

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

Hi, I'm wanting to apply rounded borders with gradients to a box but I can not do it, although the gradient applies the edges, I would like them to be like the example I attached

.box {
  border: 2px solid green;  
  border-image-source: linear-gradient(#a42e6e, #783057);
  border-image-slice: 20;
  padding: 2em;
  -webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}

  <div class="box">
    <h4 class="titulo-degradado-1">
      174
    </h4>
    <p>Atención al vecino</p>
  </div>

html css3 css bootstrap

asked by MarianoF 05.12.2017 в 16:09

source

2 answers

Problem when relating 4 tables with left join Form to upload a document to my server

score 1 · Answer 1

1

You can see examples Here .

I hope I can help you, Regards.

answered by 05.12.2017 в 17:41

score 1 · Answer 2

This way you can handle it with your colors. I have no merit in this answer, I leave you the LINK from where I saw the information.

.box {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: white;
    background-clip: padding-box;
    padding: 10px;
}


.box::after{

    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(#a42e6e, #783057);
    content: '';
    z-index: -1;
    border-radius: 16px;

}

<div class="box">
    <h4 class="titulo-degradado-1">
      174
    </h4>
    <p>Atención al vecino</p>
  </div>