Well after reading endless amounts of tutorials regarding this i still am non the wiser on the path to take.

 

Lots was implementing gifs to get the effect but i feel that it is a bit shabby, although maybe not who am i to judge. I would prefer it to be done complete code and did actualy find one that just gave the source of the effect using this below.

 

<style type="text/css">

 

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}

#xsnazzy h1 {font-size:2.5em; color:#fff;}

#xsnazzy h2 {font-size:2em;color:#06a; border:0;}

#xsnazzy p {padding-bottom:0.5em;}

#xsnazzy h2 {padding-top:0.5em;}

#xsnazzy {background: transparent; margin:1em;}

 

.xtop, .xbottom {display:block; background:transparent; border-bottom:1px solid#999999; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {background:#CCCCCC; border-left:1px solid#999999; border-right:1px solid#999999;}

.xb1 {margin:0 5px; background:#CCCCCC;}

.xb2 {margin:0 3px; border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px; margin:0 1px;}

 

.xboxcontent {display:block; background:#CCCCCC; border:0 solid#999999; border-width:0 1px;}

 

 

</style>

 

 

 

 

 

 

<h2>Snazzy Borders</h2>

 

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<h1>Snazzy Borders</h1>

<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

 

<h2>Rounded borders without images</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim

ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl

ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit

in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent

luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div>

 

 

Unfortunaly this codeing is a bit beyond my current knowledge as a learner and i do like the effect but i did not no where to start on trying to use this within my own content.

 

So hopefuly someone would be able to try and reply for me to get some mmm loverly curvs on my content by me giving you my current css

 

 

CSS

 

#content {

width: 760px;

margin-right: 280px;

line-height: 18px;

background-color:#CCCCCC;

padding-top: 10px;

 

 

}

 

#content a {

color:#000000;

text-decoration: none;

}

#content a:hover {

color:#db6d16

 

}

 

 

#content .padding {

padding: 25px;

}

 

#content h2 {

margin: 0;

padding: 0;

padding-bottom: 15px;

letter-spacing: 4px;

font-weight:400;

font-size:16pt;

text-align:center;

 

 

}

 

#content p {

line-height: 30px;

margin: 10px;

padding: 0;

padding-bottom: 15px;

}

 

Also is there anyway of explaining what the top source is doing in simple way if you think this is a good way to get me some curvs.

Basicalkly for a flexible Rounded Corner DIV the most easiest way is..

Suppose #container is the rounded DIV.

Inside that #container we have three Divs.

First DIV contains the top-left and top-right round background(suppose inside a span). and we make it to float left and right.

In the Second DIV we put the Content.

In the Third DIV we will have the botom-left and bottom-right round background and same as top.

 

NOTE:

The spans need to be made to display:block; and also width and height has to be mentioned as its an inline element.

Basicalkly for a flexible Rounded Corner DIV the most easiest way is..

Suppose #container is the rounded DIV.

Inside that #container we have three Divs.

First DIV contains the top-left and top-right round background(suppose inside a span). and we make it to float left and right.

In the Second DIV we put the Content.

In the Third DIV we will have the botom-left and bottom-right round background and same as top.

 

NOTE:

The spans need to be made to display:block; and also width and height has to be mentioned as its an inline element.

I see why you might think its easy for yourself but i am only learning and can only go of the simplest terms, i wouldnt no where to start without actualy seeing some code to understand and if possible explaining to me what is going on within the code.

 

My above code stated is being used as an example of something i dont really understand (apart from my own CSS) without me trying to get some sort of visual reference to go of im usless to go and throw the code out myself unless i keep learning my books but i thought if i could maybe suss one way of getting my div tags with rounded corners i will be able to keep the knowledge for this particular way of implementing for future.

 

Hopefully you can help me get the answer i am looking for.

 

Thanks for replying.

I see why you might think its easy for yourself but i am only learning and can only go of the simplest terms, i wouldnt no where to start without actualy seeing some code to understand and if possible explaining to me what is going on within the code.

 

My above code stated is being used as an example of something i dont really understand (apart from my own CSS) without me trying to get some sort of visual reference to go of im usless to go and throw the code out myself unless i keep learning my books but i thought if i could maybe suss one way of getting my div tags with rounded corners i will be able to keep the knowledge for this particular way of implementing for future.

 

Hopefully you can help me get the answer i am looking for.

 

Thanks for replying.

 

There is already lovely topic discussed regarding Rounded Corners and also some tutorials link Provided, Check This

There is already lovely topic discussed regarding Rounded Corners and also some tutorials link Provided, Check This

 

 

I think you might misunderstand, this topic is about producing rounded corners without the use of images.

 

Personally I would place the image into the css as a background, much like what the topic you have linked to discusses. Its easiest and saves from unnecessary messy coding.

I think you might misunderstand, this topic is about producing rounded corners without the use of images.

 

Personally I would place the image into the css as a background, much like what the topic you have linked to discusses. Its easiest and saves from unnecessary messy coding.

 

Hi Dizi

 

So in what you are saying if an image created as a required shape can be put direct in to that Div to much the same size of the div, could you put the text over the image so it actualy looks like layout or would the text push the image down. I have read that post and gone to the link to all 25 of the ways to get the result i want but i guess in learning one could stand me in good stead for the future.

 

And after seeing your work in the past and you think this is a good way to do it then this is the one i would want to no how to use.

 

any chance you could point me in the right direction of this.

I think you might misunderstand, this topic is about producing rounded corners without the use of images.

 

Personally I would place the image into the css as a background, much like what the topic you have linked to discusses. Its easiest and saves from unnecessary messy coding.

 

Oops actually me too use background images, and without using images we will have it in CSS3 much more easier way to get the rounded corners ..

Lets wait for the Browsers to Support :

Oops actually me too use background images, and without using images we will have it in CSS3 much more easier way to get the rounded corners ..

Lets wait for the Browsers to Support :

 

 

This doesnt answer my original questions on the matter, i realise there is many ways to this result i am asking for one currently and maybe with that knowledge i can use to understand more of the process.