【参照】Transcorners — Cornerus Pride is there *scared*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Transcorners | 角丸ボックス作成ツール | PHP & JavaScript Room</title> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <script type="text/javascript" src="/module/include/topic/roundcornerbox/opt.js"></script> <script type="text/javascript" src="/module/include/topic/roundcornerbox/Transcorners.js"></script> <script type="text/javascript"> window.onload=function(){ $('example2').makeRounded(); $('example3').makeRounded('top left', {borderColor: '#777', radius: 20}); $('example4').makeRounded('top'); $('example5').makeRounded('top, bottom right', {transition: fx.linear}); $('content').makeRounded('top right', {radius: 10, transition: fx.linear, borderColor: "#555"}); $('content').makeRounded('bottom left', {radius: 100}); $('error').makeRounded({radius: 20}); $('howto').makeRounded('top left', {radius: 10, transition: fx.linear, borderColor: "#555"}); $('howto').makeRounded('bottom right', {radius: 100}); var z = function() { new fx.Height($('stretch'), {duration: 300}).custom(80, 230); new fx.Height($('stretch2'), {duration: 300}).custom(80, 230); }.delay(500); var z = function() { new fx.Opacity($('stretch'), {duration: 500}).custom(0, 1); new fx.Opacity($('stretch2'), {duration: 500}).custom(0, 1); }.delay(700); }.delay(10); </script> <style type="text/css"> .inner { z-index:30; position:relative; color:#fff; } #example2,#example3,#example4,#example5{ width:50%; /* 幅 */ } #example2{ padding:5px 20px; margin:0 0 30px 0; background:#333; display:block; text-align:left;} #example2 .inner div{color:#888; font-weight:bold;} #example3{ padding:20px; margin:0 0 30px 0; background:#444; display:block; text-align:left;} #example3 .inner div{color:#AAA; font-weight:bold;} #example4{ padding:10px 20px; margin:0 0 30px 0; background:#555; display:block; text-align:left;} #example4 .inner div{color:#CCC; font-weight:bold;} #example5{ padding:20px; margin:0 0 30px 0; background:#666; display:block; text-align:left;} #example5 .inner div{color:#FFF; font-weight:bold;} </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <p>【参照】<a href="http://inviz.ru/moo/transcorners/">Transcorners — Cornerus Pride is there *scared*</a></p> <div style="background-color:#000; padding:1em;"> <div id="example2"> <div class="inner"> <div>//round all corners with 10</div> $('example2').makeRounded(); </div> </div> <div id="example3"> <div class="inner"> <div>//round top left corner with grey border and 20 pixel radius</div> $('example3').makeRounded('top left', {borderColor: '#777', radius: 20}); </div> </div> <div id="example4"> <div class="inner"> <div>//round all top corners with 10</div> $('example4').makeRounded('top'); </div> </div> <div id="example5"> <div class="inner"> <div>//round all top and bottom right cornerslinear transition</div> $('example5').makeRounded('top, bottom right', {transition: fx.linear}); </div> </div> </div> <div style="width:50%; border-style: none solid; border-color: -moz-use-text-color rgb(84, 98, 83); border-width: 0pt 1px; margin: 10px; padding: 0pt 20px; background-color: rgb(256, 255, 155);"><b style="margin: 0pt -21px 0px; display: block; background-color: rgb(255,255,255); z-index: 1; position: relative;"><b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(84, 98, 83) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 14px; margin-right: 14px;"></b> <b style="border-left: 3px solid rgb(84, 98, 83); border-right: 3px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 11px; margin-right: 11px;"></b> <b style="border-left: 2px solid rgb(84, 98, 83); border-right: 2px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 9px; margin-right: 9px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 8px; margin-right: 8px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 7px; margin-right: 7px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 6px; margin-right: 6px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 5px; margin-right: 5px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 4px; margin-right: 4px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> </b> So we can set sides as a comma separated string. We can not have different corners on the same side: 10 pixel bottom left and 20px bottom right — that's impossible.<b style="margin: 0px -21px 0pt; display: block; background-color: rgb(255,255,255); z-index: 1; position: relative;"><b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 0px; margin-right: 0px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 1px; margin-right: 1px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 2px; margin-right: 2px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 3px; margin-right: 3px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 4px; margin-right: 4px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 5px; margin-right: 5px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 6px; margin-right: 6px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 7px; margin-right: 7px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 8px; margin-right: 8px;"></b> <b style="border-left: 2px solid rgb(84, 98, 83); border-right: 2px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 9px; margin-right: 9px;"></b> <b style="border-left: 3px solid rgb(84, 98, 83); border-right: 3px solid rgb(84, 98, 83); background: rgb(256, 255, 155) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 11px; margin-right: 11px;"></b> <b style="border-left: 1px solid rgb(84, 98, 83); border-right: 1px solid rgb(84, 98, 83); background: rgb(84, 98, 83) none repeat scroll 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; display: block; height: 1px; margin-left: 14px; margin-right: 14px;"></b> </b> </body> </div>