Using gradient on div border with rounded corners

You can nest two elements and let the outer div act as the gradient border then you can work around this problem, example:

<div class="container">
  <div class="content">
    ...
  </div>
</div> 

And then in your CSS:

/* 
   unprefixed for conciseness, use a gradient generator por production code 
*/

.container { 
   background: linear-gradient(red, black);
 }

.content   { 
   background: white; 
   padding: 10px;
 }

For a working example take a look at https://stackoverflow.com/a/7066176/524555

Using a :before element is the most ideal solution in my opinion, as you then have full control via CSS and the HTML markup stays clean.

.circle {
  width: 300px;
  height: 200px;
  background: white;
  border-radius: 100%;
  position: relative;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.circle::before {
  border-radius: 100%;
  width: 100%;
  height:100%;
  content: '';
  background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  padding: 10px;
  top: -10px;
  left: -10px;
  position:absolute;
  z-index:-1;
}

You can tweak the padding and the top and left values to adjust the border thickness.

Here is a JSFiddle that shows a practival example: http://jsfiddle.net/wschwarz/e2ckdp2v/

Here is the SIMPLE solution for that :

Outcome : CSS rounded corners with gradient border

.yourClass {
  display: inline-flex;
  border: double 6px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}