by Surfa Back to Tutorials
Re-sizeable Rounded Corners Tutorial for Web Studio 4 PLUS some alternative corners and borders.
Extract from the tutorial here: ![[WWW]](http://wikispot.org/wiki/eggheadbeta/img/sycamore-www.png){kind=small}
http://webstudio.gordw.com/roundcorner.html
Step 1
Drag a html object (first one on the left) from the "Cool Stuff" tab in the "gallery" at the bottom of Web Studio onto your blank page. Then left click it and copy (Ctrl + c), then paste (Ctrl + v) the code below into it.
Code:
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent" style="height:100%"> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
Click "save" (It will close) and then go to the top of Web Studio and locate the "page" button.
Step 2
Then, starting with the page button: click page > page properties > page html > and select "inside page header" (round radio button). Copy (Ctrl + c) and paste (Ctrl + v) the below code into the window thats located below the inside page header button.
Code:
<style type="text/css">
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #000000; border-right:1px solid #000000;}
.xb1 {margin:0 5px; background:#000000;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
br {margin:0;padding:0;border:0}
.xboxcontent {display:block; background:#d4d4d4; border:0 solid #000000; border-width:0 1px;}
</style>
Step 3
You must not change anything in the code found in step 1!
In step 2, you may change the color codes. Example: {background:#d4d4d4; border-left:1px solid can be changed to any color you want such as: {background:#000000; border-left:1px solid . There are two separate color codes within this code. One is for the border and the other is for the inside color.
You may also change other attributes of the code in step 2, but be careful. (You may want to have a backup copy of each of the codes in step 1 and step 2 in case you need to start over).
After customizing the code the way you want it, you may then "stretch" it to any height or width you desire by simply resizing the "html object". Then provide whatever content you may want and position it over top of the html object.
It's as simple as that! Good luck!
Alternative corners:
Round corners with dashed borders:
<style type="text/css">
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; height:1px;}
.xb1 { box-sizing: border-box; -moz-box-sizing: border-box; border-top:1px dashed blue;padding:0}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid blue; border-right:1px solid blue;}
.xb2, .xb4 { border:0}
.xb1 {margin:0 5px;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#d4d4d4; border:1px dashed blue; border-width:0 1px;}
</style><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent" style="height:100%"></div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
Note: The appearance of the dashes is governed partly by the size of the HTML object.
Round corners with a bigger radius:
<style type="text/css">
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {display:block; overflow:hidden; height:1px;}
.xb1 { box-sizing: border-box; -moz-box-sizing: border-box; border-top:1px solid blue;padding:0;}
.xb2, .xb4, .xb3, .xb5, .xb6 {background:#d4d4d4; border-left:1px solid blue; border-right:1px solid blue;}
.xb1 {margin:0 9px; }
.xb2 { margin:0 6px; border-width:0 3px;}
.xb3 { margin:0 4px; border-width:0 2px;}
.xb4 { margin:0 3px;}
.xb5 { height:2px; margin:0 2px;}
.xb6 { height:3px; margin:0 1px;}
.xboxcontent {display:block; background:#d4d4d4; border:1px solid blue; border-width:0 1px;}
</style><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b></b> <div class="xboxcontent" style="height:100%"></div> <b class="xbottom"><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
Round corners with a bigger radius and dashed borders:
<style type="text/css">
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {display:block; overflow:hidden; height:1px;}
.xb1 { box-sizing: border-box; -moz-box-sizing: border-box; border-top:1px dashed blue;padding:0}
.xb2, .xb3, .xb4, .xb5, .xb6 {background:#d4d4d4; border-left:1px solid blue; border-right:1px solid blue;}
.xb2, .xb6 { border:0}
.xb1 {margin:0 9px;}
.xb2 {margin:0 6px;}
.xb3 {margin:0 4px;}
.xb4 {margin:0 3px;}
.xb5 {height:2px;margin:0 2px;}
.xb6 {height:3px; margin:0 1px;}
.xboxcontent {display:block; background:#d4d4d4; border:1px dashed blue; border-width:0 1px;}
</style><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b></b> <div class="xboxcontent" style="height:100%"></div> <b class="xbottom"><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
Incut corners:
<style type="text/css">
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {display:block; overflow:hidden; height:1px; background:#d4d4d4;}
.xb1 { box-sizing: border-box; -moz-box-sizing: border-box; border-top:1px solid blue;padding:0}
.xb2, .xb4, .xb3, .xb5, .xb6 { border-left:1px solid blue; border-right:1px solid blue;}
.xb1 {margin:0 8px;}
.xb2 {height:3px; margin:0 8px;}
.xb3 {height:2px; margin:0 7px;}
.xb4 {margin:0 6px;}
.xb5 {margin:0 4px; border-width:0 2px;}
.xb6 {margin:0; border-width:0 4px;}
.xboxcontent {display:block; background:#d4d4d4; border:1px solid blue; border-width:0 1px;}
</style><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b></b> <div class="xboxcontent" style="height:100%"></div> <b class="xbottom"><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
Larger incut corners:
<style type="text/css">
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7, .xb8 {display:block; overflow:hidden; height:1px; border:0;}
.xb1 { box-sizing: border-box; -moz-box-sizing: border-box; border-top:1px solid blue;padding:0}
.xb2, .xb6, .xb4, .xb5, .xb3, .xb7, .xb8 {background:#d4d4d4; border-left:1px solid blue; border-right:1px solid blue;}
.xb1 {margin:0 15px;}
.xb2 {height:5px;margin:0 15px;}
.xb3 {height:3px;margin:0 14px;}
.xb4 {height:2px;margin:0 13px;}
.xb5 {margin:0 12px;}
.xb6 {margin:0 10px; border-width:0 2px; }
.xb7 {margin:0 7px; border-width:0 3px;}
.xb8 {margin:0; border-width:0 7px}
.xboxcontent {display:block; background:#d4d4d4; border:1px solid blue; border-width:0 1px;}
</style><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b><b class="xb8"></b></b> <div class="xboxcontent" style="height:100%"></div> <b class="xbottom"><b class="xb8"></b><b class="xb7"></b><b class="xb6"></b> <b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
Round top corners, square bottom corners:
<style type="text/css">
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #000000; border-right:1px solid #000000;}
.xb1 {margin:0 5px; background:#000000;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
br {margin:0;padding:0;border:0}
.xboxcontent {display:block; background:#d4d4d4; border:0 solid #000000; border-width:0 1px;}
</style><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent" style="height:100%; border-bottom:1px solid #000000"> </div>
.
