Jump to content

More than just "Rounded Corners" using CSS


Recommended Posts

This is not anything specia (or new)l, but someone might find it handy for adding rounded corners without using images.

It's my attempt to try and make borders around objects, like rounded corners, but instead using special characters or fonts, like windings, etc, you can come up with more than just Rounded Corners. The following is just an example. Save it as an html file and you will see what I came up with.

##  Based on code from: http://www.html.it/articoli/nifty/index.html 
##  I came up with the idea that you could do more than just rounded
##  corners. Given the patience and effort, you can create any number
##  of combinations using CSS. My goal is at some point to try and mimic the
##  Ascii art of the BBS days with color transparencies and full pictures,
##  using html and without some premade executable that converts images to Ascii text.
##  The only problem I am having is different browsers render the fonts
##  differently and the height of the font may not be the same. Also, some special 
##  characters only show up on certain browsers, but not the others.
##  This probably has no real world use, but if you wanted to make some art
##  or just play with borders around objects on your page, this could come in handy. - DigiP
##  10/17/2007
<style type="text/css">
body{padding: 0px;background-color: black; font: 16px tahoma;}

.container{ margin: 0 0;background: #9BD1FA}
.container2{ margin: 0 0; background: #9BD1FA;}
.container3{ margin: 0 0; background: #fff; }

b.rtop, b.rbottom{display:block; background:white}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

i.rtop {display:block; background: black; }
i.rbottom{display:block; background: black; }
i.rtop i, i.rbottom i{display:block;height: 1px; overflow: hidden; background: #fff;}
i.r1{margin: 0 5px; }
i.r2{margin: 0 3px; }
i.r3{margin: 0 2px; }
i.rtop i.r4, i.rbottom i.r4{margin: 0 1px;height: 2px; }


<div class="container3" id="circle1test2" style="width:522; position: absolute; top:3px; left: 69;">
<i class="rtop"><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="r4"></i></i>


<i class="rbottom">
<i class="r4"></i>
<i class="r3"></i>
<i class="r2"></i>
<i class="r1"></i>

<div class="container" id="l1" style="width:500; position: absolute; top:10; left: 80; z-index:6;">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<center><font color="black">
<strong>An attempt to create smooth outlines without images. <BR>Add to it if you want to.</strong>

<b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b>

<div class="container2" id="circle1test" style="width:512; position: absolute; top:7px; left: 74; z-index:6">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>

<div id="bullet" style="position: absolute; left: 0; top: -100; z-index:7; color: white; font: 200px tahoma;">•</div>
<div id="bullet1" style="position: absolute; left: 20; top: -40; z-index:7; color: black; font: 100px tahoma;">∞</div>

<div id="bullet2" style="position: absolute; left: 569; top: -100; z-index:7; color: white; font: 200px tahoma">•</div>

<div id="bullet4" style="position: absolute; left: 275; top: 60; z-index:5; color: white; font: 150px tahoma;">Φ</div>
<div id="bullet5" style="position: absolute; left: 40; top: 36; z-index:5; color: white; font: 118px tahoma;">•</div>
<div id="bullet5a" style="position: absolute; left: 570; top: 36; z-index:5; color: white; font: 118px tahoma;">•</div>

<div id="bullet6" style="position: absolute; left: 198; top: 60; z-index:5; color: white; font: 250px tahoma;">↓</div>
<div id="bullet7" style="position: absolute; left: 287; top: 60; z-index:5; color: white; font: 250px tahoma;">↓</div>
<div id="bullet3" style="position: absolute; left: 277; top: 245; z-index:7; color: white; font: 150px tahoma;">♥


Link to comment
Share on other sites

That's kind of the point to sharing it. Or do I detect a bit of sarcasm?

Link to comment
Share on other sites

nah I didn't meant it to be sarcastic, it's just I've had someone getting completely pissed at me because I used a piece of PHP for something I was coding, which he posted publically. Just asking to be sure ;)

Yeah, I wouldn't post it here if it wasn't meant to be used. Also, it's not proprietary stuff here. Just HTML and CSS.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...