border-radius using a slash ("/") between two values

Question

By javascript or jquery method, when I try to modify css border-radius with 2 values using a slash between the result is without the slash.

Example :

document.getElementById("mydiv").style.borderRadius ="20% / 15%"; 

or :

$( "#mydiv" ).css({'border-radius':'20% / 15%'})

the result is : border-radius: 20% 15%; (without slash between values)

But I need this slash "/" to have different angle to define corners

Any solutions ?

Thanks for all answeres.

My problem is not the effect in live, yes it's work, but the writed result in the page (for saving page) because the css writed inside the bloc div is wrong : like "<div id="mydiv" style="border-radius: 20% 15%;"> then when the file is readed again, the result is not like with border-radius: 20% / 15%;.

Answer 1

Your code works as expected in Chrome at least. But Chrome DevTools shows this property wrong.

$('#s').on('click', function() {
    $('#mydiv').css({'border-radius': '20% / 5%'});
});
$('#d').on('click', function() {
    alert($('#mydiv').css('border-radius'));
});

div {
    width: 100px;
    height: 100px;
    background: #000;
}
button {
    display: block;
    margin: 10px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="mydiv"></div>
<button id="d">get border-radius</button>
<button id="s">set border-radius</button>