Border-radius using forward slash ("/") between two values
By javascript or jquery method, when I try to change css border-radius
with 2 values using forward slash between result, there is no forward slash.
Example:
document.getElementById("mydiv").style.borderRadius ="20% / 15%";
or:
$( "#mydiv" ).css({'border-radius':'20% / 15%'})
result: border-radius: 20% 15%;
(no forward slash between values)
But I need that slash "/" to have different angles to define the angles.
Any solutions?
Thanks for all the answers.
My problem is not to live live, yes it works, but the imposed result on the page (to save the page) because the css fed inside the div block is wrong: for example, " <div id="mydiv" style="border-radius: 20% 15%;">
then when re-reading the file, the result is not like border-radius: 20% / 15%;
.
source to share
Your code works at least in Chrome. But Chrome DevTools does not display this property correctly.
$('#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>
source to share
An easy solution is to list all values and not use shorthand, for example ( MDN ):
border-radius: 4px 3px 6px / 2px 4px;
/* is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
Expanding on this, you can do this:
$( "#mydiv" ).css({
'border-top-left-radius': '20% 5%',
'border-top-right-radius': '20% 5%',
'border-bottom-right-radius': '20% 5%',
'border-bottom-left-radius': '20% 5%',
})
// OR
var mydivstyle = document.getElementById("mydiv").style;
mydivstyle.borderTopLeftRadius = '20% 5%';
mydivstyle.borderTopRightRadius = '20% 5%';
mydivstyle.borderBottomLeftRadius = '20% 5%';
mydivstyle.borderBottomRightRadius = '20% 5%';
Working example:
Updated to display the correct css property (requested by the OP)
$("#mydiv").css({
'border-top-left-radius': '20% 15%',
'border-top-right-radius': '20% 15%',
'border-bottom-right-radius': '20% 15%',
'border-bottom-left-radius': '20% 15%',
});
$("#output").text(
$("#mydiv").css('border-radius')
);
#mydiv { height: 40px; width: 100%; background: #00f; }
#output { font-family: monospace; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<h2>Result: (<code>$("#mydiv").css('border-radius')</code>)</h2>
<div id="output"></div>
Details from MDN
Update
Chrome dev utilities display this property inconsistently. Here are some screens:
From style=border-radius: 10% 5%;
:
From style=border-radius: 10% / 5%;
:
After running the jQuery snippet (read 10% 5%
, but the corner properties expand as 10% / 5%
):
source to share