Compute Border-Radius (jQuery, Different Browser)

by pleinx

HTML

<div class="left">
  <div class="el default">Hi, i have border-radius around myself</div>

  <div class="el border-radius-bottom-only">Hi, i have border-radius only on bottom</div>

  <div class="el border-radius-top-only">Hi, i have border-radius only on top</div>
  
  <div class="el border-radius-mix">Hi, i have border-radius only on top</div>
  
  
  <div class="el add-border-radius">
    added only border-radius for all browser?
  </div>
</div>

<div class="right">

</div>

CSS

.left {float:left}
.right {float:right}

.el {
  width: 100px;
  height: 100px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 30px;
}

.default {
  background: red;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

.border-radius-bottom-only {
  background: orange;  
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
}

.border-radius-top-only {
  background: green;  
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
}

.border-radius-mix {
  background: grey;  
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

.add-border-radius {
  background: yellow;
  color: black;
}

JavaScript

var $logger = $('.right');

var $default = $('.default');
var $bottomOnly = $('.border-radius-bottom-only');
var $topOnly = $('.border-radius-top-only');
var $mix = $('.border-radius-mix');

// for chrome only
$logger.append( 'all: <b>' + $default.css('border-radius') + '</b><br>' );
$logger.append( 'bottomOnly: <b>' + $bottomOnly.css('border-radius') + '</b><br>' );
$logger.append( 'bottomOnly: <b>' + $topOnly.css('border-radius') + '</b><br>' );
$logger.append( 'mix: <b>' + $mix.css('border-radius') + '</b><br>' );

var borderRadius = getBorderRadius($mix);

// override the default with the $mix style
// $default.css($.extend({background: 'blue'}, borderRadius));

function getBorderRadius($target) {
	var topLeft = $target.css('borderTopLeftRadius');
  var topRight = $target.css('borderTopRightRadius');
  var bottomLeft = $target.css('borderBottomLeftRadius');
  var bottomRight = $target.css('borderBottomRightRadius');
  
	return {
    '-webkit-border-top-left-radius': topLeft,
		'-webkit-border-top-right-radius': topRight,
		'-webkit-border-bottom-right-radius': bottomRight,
		'-webkit-border-bottom-left-radius': bottomLeft,
		'-moz-border-radius-topleft': topLeft,
		'-moz-border-radius-topright': topRight,
		'-moz-border-radius-bottomright': bottomRight,
		'-moz-border-radius-bottomleft': bottomLeft,
		'border-top-left-radius': topLeft,
		'border-top-right-radius': topRight,
		'border-bottom-right-radius': bottomRight,
		'border-bottom-left-radius': bottomLeft
  };
}