Page 1 of 1

Rounded corners without images - (For all browsers) get rounded corners on an element for almost all browsers Rate Topic: -----

#1 devangnegandhi  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 40
  • Joined: 23-January 06

Posted 13 September 2007 - 09:19 AM

ok ok....you must be thinking that - "rounded corners without images" is something that has been already posted here. ya I know, but that one can be used only in Mozilla i think..... but definitely not in IE. Here I use a completely different method of getting a rounded corner by purely using basic CSS (which thus results in its compatibility with almost all the latest browsers) , and this code is not which I have written, but by a web designer named Alessandro Fulciniti and he has called this piece of code as Nifty Corners and if you want to get more info on this just go to HTML.it

The basic idea is to use a set of inline tags with appropriate margins and colour. The following will give you corners with quite a descent size of roundness.

<div class="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--your content goes here -->
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>


The next piece of code is very similar but will give you smaller corners

<div class="container">
<b class="rtop">
  <b class="rs1"></b> <b class="rs2"></b>
</b>
<!--your content goes here -->
<b class="rbottom">
   <b class="rs2"></b> <b class="rs1"></b>
</b>
</div>


The primary reason to use inline tags here was because inline tags can be used inside any other tag. I am using here a <b> tag but you can even use other inline tags like <span>

The basic CSS for the above code is something like this

b.rtop, b.rbottom{display:block;background: #FFF}
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}	 //the above 4 classes are for big corners

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}	//the above 2 classes are for small corners
div.container{ margin: 0 10%;background: #9BD1FA}


the above CSS will make the corners rounded. The logic used here is the we use a series of <b> tags inside a mother <b> tag at the starting and at the end of our <div> tag. The no of <b> tags to be used is usually 4 for a descent size of roundness and 2 if you want a smaller rounded corner. But that completely depends on you. Then for each individual <b> tag inside it give decreasing values of left and right margin usually with a difference of 2px between 2 consecutive <b> tags to get a curve. (if you give only a difference of 1 px then you'll end up just getting a diagonal line instead of a curve).

The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.

Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.

The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, Firefox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.

Following is an example implementing the above technique. Just copy the following code, make an .html file and view it in any browser.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
b.rtop, b.rbottom{display:block;background: #FFF}
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}

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
div.container{ margin: 0 10%;background: #9BD1FA}
</style>
</head>

<body>
<div class="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<h1 align="center">Hi!</h1>
	<p>This is an implementation of the Nifty Corners With big corners.</p>
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
<br /><br />
<div class="container">
<b class="rtop">
  <b class="rs1"></b> <b class="rs2"></b>
</b>
<h1 align="center">Hi!</h1>
	<p>This is an implementation of the Nifty Corners With small corners.</p>
<b class="rbottom">
   <b class="rs2"></b> <b class="rs1"></b>
</b>
</div>
</body>
</html>



Is This A Good Question/Topic? 1
  • +

Replies To: Rounded corners without images - (For all browsers)

#2 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Posted 13 September 2007 - 11:38 AM

very slick.
I don't know if bold tags are the best use, it could be div instead i think, but still the idea is good, and nice to see it working in IE too.
Was This Post Helpful? 0
  • +
  • -

#3 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Posted 13 September 2007 - 04:51 PM

View PostWilliam_Wilson, on 13 Sep, 2007 - 11:38 AM, said:

very slick.
I don't know if bold tags are the best use, it could be div instead i think, but still the idea is good, and nice to see it working in IE too.


If you check out this article, they mention/explain why they used bold tags instead of div's - it's explained better in the article, but basically they wanted an in-line by default tag.

This post has been edited by girasquid: 14 September 2007 - 08:29 PM

Was This Post Helpful? 0
  • +
  • -

#4 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Posted 17 September 2007 - 06:54 AM

I can't seem to get this to work :( I'm pretty sure I am doing everything it says too. Oh the frustration.
Was This Post Helpful? 0
  • +
  • -

#5 devangnegandhi  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 40
  • Joined: 23-January 06

Posted 18 September 2007 - 01:18 AM

View Postaxel, on 17 Sep, 2007 - 07:24 PM, said:

I can't seem to get this to work :( I'm pretty sure I am doing everything it says too. Oh the frustration.


can you post your code..... let me see if i can help....
Was This Post Helpful? 0
  • +
  • -

#6 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Posted 18 September 2007 - 11:45 AM

I will in a little bit. My dad is doing stuff on the computer I use so I can't right now.

I will try to get as much help as I can with just this:

1. Does the CSS have to be embedded ( I think thats the right word) or can I put it on my linked CSS page.

2. Wouldn't the code be pretty much exactly the same as the one in the tutorial?





* I think he is getting off, I will go pull up my code and edit this in a minute.
Was This Post Helpful? 0
  • +
  • -

#7 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Posted 18 September 2007 - 11:58 AM

do you mean link the css from a separate file? yes remove the style section and link it in instead.

the resulting page to the browser will be just as it is now.
Was This Post Helpful? 0
  • +
  • -

#8 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Posted 18 September 2007 - 12:29 PM

Ok, I figured out how to get the tables to work on my own, but now I am having problems with changing the text inside them. If I try to make the text black, it changes the whole table. I am trying to make a table like the navigation on this site to the left. Maybe that is totally different. Here is some of the code.

 

<div class=nav_left>
<div class="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<tabletitle>Electric</tabletitle>
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
</div>




and here is the code from my CSS:

 

.container {

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #FF9900}
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}





Sorry for the annoyance :P
Was This Post Helpful? 0
  • +
  • -

#9 devangnegandhi  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 40
  • Joined: 23-January 06

Posted 19 September 2007 - 02:30 AM

well if you ask me there is a much simpler way for doing this.....go visit the link i have added in the starting of my tutorial to html.it and then there the author has given a javascript file by which by just calling one function you can round any element in your page..... just download the file and paste it in your webpage folder.......I could explain how to do this in detail but it would be too long and i dont get too much internet time to explain you it detail.....maybe I could write another tutorial on it but I dont know if the moderators may count it same as this one.....so can I?? maybe william can ans to this one....
Was This Post Helpful? 0
  • +
  • -

#10 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Posted 19 September 2007 - 05:37 AM

Hey thanks for your help man. I finally got it figured out . You helped a lot.
Was This Post Helpful? 0
  • +
  • -

#11 devangnegandhi  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 40
  • Joined: 23-January 06

Posted 20 September 2007 - 11:08 PM

no probs dude.....
Was This Post Helpful? 0
  • +
  • -

#12 Winstinology  Icon User is offline

  • I'm pretty good with a laser mouse..
  • member icon

Reputation: 7
  • View blog
  • Posts: 958
  • Joined: 08-May 08

Posted 20 June 2008 - 05:09 PM

<b> == DEPRECATED
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1