SoFunction
Updated on 2025-04-14

Rounded border extension code based on mootools


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
({
setBorder: function(pic, len) {
/// <summary>
/// Set container border (picture).
/// Tested div
/// </summary>
/// <param name="pic">Picture address</param>
/// <param name="len">Border width</param>
/// <returns type="Element" />
var content = ();
var width = ().x + len * 2;
var height = ().y + len * 2;
().setStyles({ 'width': width, 'height': height });
var lt = new Element('div', {
'styles': {
'width': len,
'height': len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat left top'
}
});
var rt = new Element('div', {
'styles': {
'width': width - len,
'height': len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat right top'
}
});
var lb = new Element('div', {
'styles': {
'width': len,
'height': height - len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat left bottom'
}
});
var rb = new Element('div', {
'styles': {
'width': width - len,
'height': height - len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat right bottom'
}
});
(rb, 'top');
(this, 'top');
(this);
(this);
(this);
return this;
}
});
('domready', function() {
$('demo').getElements('div').each(function(d) {
('', 8);
});
});
</script>
</head>
<body>
<div >
<div style="width:150px; height:100px;">
<div style="width:100%; height:100%; background-color:Red;"></div>
</div>
<div style="width:80px; height:130px;">
<div style="width:100%; height:100%; background-color:Green;"></div>
</div>
</div>
</body>
</html>