I have spent ages looking into this and not being able to do it.<br /><br />I am new to css so please explain everything in easy steps!<br /><br />I thought there might be a border/background radius thing but I don't think browsers support this???<br /><br />How do I make just the top right corner curved??<br /><br />Thanks <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/biggrin.gif" style="vertical-align:middle" emoid="
" border="0" alt="biggrin.gif" /><!--content-->
It's a CSS3 feature. Partially supported by some browsers. Some with their own CSS properties.<br /><br />http://www.css3.info/preview/rounded-border/<!--content-->
<!--quoteo(post=12970:date=Oct 15 2007, 06:12 PM:name=Thomas Thomassen)--><div class='quotetop'>QUOTE(Thomas Thomassen @ Oct 15 2007, 06:12 PM) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->It's a CSS3 feature. Partially supported by some browsers. Some with their own CSS properties.<br /><br />http://www.css3.info/preview/rounded-border/<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Yip that's it exactly, best way to do it now is to design a curve in your favored graphics package, set it as the background and align it top right using CSS.<br /><br /><img src="http://www.webdesignerforum.co.uk/style_emoticons/default/smile.gif" style="vertical-align:middle" emoid="" border="0" alt="smile.gif" /><!--content-->
Or, just rely><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->The "border-radius thing" is a bit to "new" at the moment - the browsers haven't caught style="vertical-align:middle" emoid="" border="0" alt="biggrin.gif" /> Thanks. I was doing all of the above but not the background attachment bit. What does that bit mean/why did I need to include that?<br /><br />Thanks everyone for your replies, its good to have finally got it sorted <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/biggrin.gif" style="vertical-align:middle" emoid="" border="0" alt="biggrin.gif" /><!--content-->
No, the scroll attribute is default, so no need to add it.<br /><br />Rachel's example describes better what it does, but when you're more familiar with CSS you'll prolly use shorthand more:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#container {<br />Â Â background: url(path/to/image.png) top right no-repeat;<br />}<!--c2--></div><!--ec2--><!--content-->
The "background-attachment" is most commonly used when adding a background to your the <body> of your webpage.<br /><br />background-attachment:scroll;<br /><br />will have the image scroll with the contents.<br /><br />background-attachment:fixed;<br /><br />will have the image stay where it is, even after scrolling.<br /><br />Say you have a blue>white gradient along the top of your page (repeated horizontally) - you can choose whether to have it disappear up when you scroll down the page, or you can choose to always have it there.<br /><br />Hope that makes sense.<br /><br />And like Thomas said, it's default to be "scroll" so it's not required that you include it.<br /><br />As for short-hand, that does inded take up less space, but I prefer writing it out long-hand because it makes more sense to me that way. It's all down to personal preference.<!--content-->
" border="0" alt="biggrin.gif" /><!--content-->It's a CSS3 feature. Partially supported by some browsers. Some with their own CSS properties.<br /><br />http://www.css3.info/preview/rounded-border/<!--content-->
<!--quoteo(post=12970:date=Oct 15 2007, 06:12 PM:name=Thomas Thomassen)--><div class='quotetop'>QUOTE(Thomas Thomassen @ Oct 15 2007, 06:12 PM) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->It's a CSS3 feature. Partially supported by some browsers. Some with their own CSS properties.<br /><br />http://www.css3.info/preview/rounded-border/<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Yip that's it exactly, best way to do it now is to design a curve in your favored graphics package, set it as the background and align it top right using CSS.<br /><br /><img src="http://www.webdesignerforum.co.uk/style_emoticons/default/smile.gif" style="vertical-align:middle" emoid="
" border="0" alt="smile.gif" /><!--content-->Or, just rely><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->The "border-radius thing" is a bit to "new" at the moment - the browsers haven't caught style="vertical-align:middle" emoid="
" border="0" alt="biggrin.gif" /> Thanks. I was doing all of the above but not the background attachment bit. What does that bit mean/why did I need to include that?<br /><br />Thanks everyone for your replies, its good to have finally got it sorted <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/biggrin.gif" style="vertical-align:middle" emoid="" border="0" alt="biggrin.gif" /><!--content-->No, the scroll attribute is default, so no need to add it.<br /><br />Rachel's example describes better what it does, but when you're more familiar with CSS you'll prolly use shorthand more:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#container {<br />Â Â background: url(path/to/image.png) top right no-repeat;<br />}<!--c2--></div><!--ec2--><!--content-->
The "background-attachment" is most commonly used when adding a background to your the <body> of your webpage.<br /><br />background-attachment:scroll;<br /><br />will have the image scroll with the contents.<br /><br />background-attachment:fixed;<br /><br />will have the image stay where it is, even after scrolling.<br /><br />Say you have a blue>white gradient along the top of your page (repeated horizontally) - you can choose whether to have it disappear up when you scroll down the page, or you can choose to always have it there.<br /><br />Hope that makes sense.<br /><br />And like Thomas said, it's default to be "scroll" so it's not required that you include it.<br /><br />As for short-hand, that does inded take up less space, but I prefer writing it out long-hand because it makes more sense to me that way. It's all down to personal preference.<!--content-->