Hola, he revisado el código y la imagen y no resulta sencillo de resolver. En primer lugar la imagen no parece definir un borde adecuado. Tendrías que usar una imagen que sea un borde en miniatura que diferencie las esquinas de la parte intermedia, de forma que las esquinas se coloquen en su posición y la parte intermedia se repita o se estire.
(http://www.w3schools.com/cssref/border.png)
Por otro lado al extenderse el fondo hasta el borde mismo, se produce un solapamiento. Esto son quizás detalles todavía no bien resueltos por CSS. Para evitarlo, en este código he puesto un div envolvente para crear el borde y otro interno para definir el fondo.
A partir de estas ideas creo que puedas jugar con distintas opciones y mejorarlo.
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
.externo{margin:0 auto; width:400px; height:200px;
border: 30px solid ;
border-image: url(border.png) 30 30 stretch;
}
.interno{background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
height:100%;
}
</style>
</head>
<body>
<div class="externo"><div class="interno">Un contenido</div></div>
</body>
</html>
Saludos