Rico.Corner - with option.border='#ff0000'
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico.Corner</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type='text/javascript'>
Rico.loadModule('Corner');
Rico.onLoad( function() {
var roundCorners = Rico.Corner.round.bind(Rico.Corner);
roundCorners('a0',{border: '#ff0000'});
roundCorners('a',{compact:true, border: '#ff0000'});
roundCorners('b',{blend:false, border: '#ff0000'});
roundCorners('c',{blend:false,compact:true, border: '#ff0000'});
roundCorners('d',{corners:"tl", border: '#ff0000'});
roundCorners('e',{corners:"br", border: '#ff0000'});
roundCorners('f',{corners:"top", border: '#ff0000'});
roundCorners('g',{corners:"bottom", border: '#ff0000'});
roundCorners('h',{corners:"tl br", border: '#ff0000'});
roundCorners('i',{corners:"all", color: "transparent", border: '#ff0000'});
roundCorners('j',{corners:"all", compact:true, color: "transparent", border: '#ff0000'});
});
</script>
<style type="text/css">
h1 {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 16pt;
}
span.code2 {
font-family : Courier;
font-size : 11px;
margin : 12px;
}
div.cornerSamples {
width : 320px;
margin-top : 4px;
background-color : #ffffee;
font-family : Arial;
font-size : 11px;
text-align : left;
}
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
font-size : 11px;
}
</style>
</head>
<body>
<h1 style='float:left;'>Rico.Corner - with option.border='#ff0000'</h1>
<table cellspacing="0" cellpadding="7" style="clear:both;" >
<tr>
<td colspan="2"><div id="a0" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {border: '#ff0000'});<br><br><br><br></span></div></td>
</tr>
<tr>
<td><div id="a" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {compact:true,border: '#ff0000'});<br><br><br><br></span></div></td>
<td><div id="b" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {blend:false,border: '#ff0000'});<br><br><br><br></span></div></td>
</tr>
<tr>
<td><div id="c" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {blend:false,compact:true,border: '#ff0000'});<br><br><br><br></span></div></td>
<td><div id="d" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"tl",border: '#ff0000'});<br><br><br><br></span></div></td>
</tr>
<tr>
<td><div id="e" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"br",border: '#ff0000'});<br><br><br><br></span></div></td>
<td><div id="f" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"top",border: '#ff0000'});<br><br><br><br></span></div></td>
</tr>
<tr>
<td><div id="g" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"bottom",border: '#ff0000'});<br><br><br><br></span></div></td>
<td><div id="h" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"tl br",border: '#ff0000'});<br><br><br><br></span></div></td>
</tr>
<tr>
<td><div id="i" class="cornerSamples" style="background-image:url(examples/client/images/gradient.jpg)"><span class="code2">Rico.Corner.round(element, {color:"transparent",border: '#ff0000'}</span><br><br><br><br></div></td>
<td><div id="j" class="cornerSamples" style="background-image:url(examples/client/images/gradient.jpg)"><span class="code2">Rico.Corner.round(element, {color:"transparent",compact:true,border: '#ff0000'}</span><br><br><br><br></div></td>
</tr>
</table>
</body>
</html>
Related examples in the same category