Rico.Corner - without borders : Corner « Rico « JavaScript DHTML






  1. JavaScript DHTML
  2. Rico
  3. Corner

Rico.Corner - without borders

 
<!--
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');
   roundCorners('a',{compact:true});
   roundCorners('b',{blend:false});
   roundCorners('c',{blend:false,compact:true});
   roundCorners('d',{corners:"tl"});
   roundCorners('e',{corners:"br"});
   roundCorners('f',{corners:"top"});
   roundCorners('g',{corners:"bottom"});
   roundCorners('h',{corners:"tl br"});
   roundCorners('i',{corners:"all", color: "transparent"});
   roundCorners('j',{corners:"all", compact:true, color: "transparent"});
});
</script>

<style type="text/css">
h1 {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 16pt;
}
span.code {
   font-family : fixed;
   font-size   : 11px;
   color       : #4b4b4b;
}
span.codeTitle {
   font-family : Courier;
   font-size   : 12px;
}
span.code2 {
   font-family : Courier;
   font-size   : 11px;
   margin      : 12px;
}
span.code3 {
   display      : block;
   font-family  : Courier;
   font-size    : 11px;
   padding-left : 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 -  without borders</h1>
<table cellspacing="0" cellpadding="7" style="background-color:#1e4552;clear:both;" >

<tr>
<td colspan="2"><div id="a0" class="cornerSamples"><span class="code2">Rico.Corner.round(element);<br><br><br><br></span></div></td>
</tr>

<tr>
<td><div id="a" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {compact:true});<br><br><br><br></span></div></td>
<td><div id="b" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {blend:false});<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});<br><br><br><br></span></div></td>
<td><div id="d" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"tl"});<br><br><br><br></span></div></td>

</tr>

<tr>
<td><div id="e" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"br"});<br><br><br><br></span></div></td>
<td><div id="f" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"top"});<br><br><br><br></span></div></td>
</tr>

<tr>
<td><div id="g" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"bottom"});<br><br><br><br></span></div></td>
<td><div id="h" class="cornerSamples"><span class="code2">Rico.Corner.round(element, {corners:"tl br"});<br><br><br><br></span></div></td>
</tr>

<tr>

<td><div id="i" class="cornerSamples" style="background-image:url(images/gradient.jpg)"><span class="code2">Rico.Corner.round(element, {color:"transparent"}</span><br><br><br><br></div></td>
<td><div id="j" class="cornerSamples" style="background-image:url(images/gradient.jpg)"><span class="code2">Rico.Corner.round(element, {color:"transparent",compact:true}</span><br><br><br><br></div></td>
</tr>

</table>

</body>
</html>








Related examples in the same category

1.Rico.Corner - using color names
2.Rico.Corner - with option.border='#ff0000'
3.Select which corners should be rounded on the tabs