CSS Rounded Corners: Dreamweaver Tutorial

[newbielives]

For those rounding corners with only css let me ask you how does it look in IE ;)

[Averagejoe644]

Thanks Tut...what you're doing is just what i need. Thanks mate. Keep em coming bro...you explain it well. J

[ZepMovies]

thanks for the tutorial :D

[thinkdreamweaver]

Hey Andrew... you almost got it... why do you have two files top and bottom... here is a more productive technique my friend - and more flexible for changes - I have 24 year of Adobe master techniques (since 1987) - if there is a faster better way.. I know it - youtubeDotCom/thinkdreamweaver and search: Dreamweaver CSS create rounded corner webpage with div tags od course html5 CSS3 solves all of this - good luck Robert- follow my twitter @adobevideos or @thinkadobe

[butlerreuben]

I tried the

-moz-

-webkit-

css but it doesnt seem to work within multiple divs for some reason.

[Marshalmapy]

Great tut. Thank you!!

[Bellaintense]

Very nice vid

[OPVurb]

thanks for the tut but it really didnt help me that much, other then the css

but i figured out a easier way

[Oliver2601t]

You sound like Charlie Sheen ^_^

[3LARI]

@Oliver2601t He's bangin' 7em rocks!

[mrbromantics]

you know how you just cropped a decent size off both sides? i did that but when i put the codes in like the video says.. it still shows it as a box unless I put the rbox(in my project its #content) as a different background color along with the background image of the bottom part.

[guidowigger]

all i did for what i wanted to do is make a rounded rectangle and set it as the bg for the css tag in dreamweaver and selected repeat-no repeat, horizontal position-center, vertical position-center and it stays in place.

[BKISHANN]

I initially thought you would do those roundings only with only CSS !!

[manchesternorth7]

thanks for the vid I did learn how to make a rounded box, which was pretty obvious really. i managed to do this in under a minute with just a few clicks. the box isn't actually round it has white corners, change your background to black if you don't believe me:) lol thanks

[ClTIZEN]

boder-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

khtml-border-radius: 10px;

[smokenfly514]

@ClTIZEN hahaha

[aya933]

thank u so much.u help me a lot.

[rocon1]

thankyou so much

[Pop2Lock]

LOL @ whatever.html

[nokhazali]

visit for dreamweaver cs5 step by step free tutorials dreamweavercstutorials.co.cc

[MrVANc0uver]

Cуки!



[azazel188]

@MrVANc0uver cам ты сука, иди учи английский лучше

[d123s404]

Nice intro!

[kleinespelvids]

Hi,

How about just using this in your CSS style:

#div { -moz-border-radius:5px; -webkit-border-radius:5px;

}

That makes rounded edges without having to use any images.

Good vid though. I used your method before discovering these two easy to use CSS styles.

[trudoll]

@kleinespelvids

that technique doesn't work with all of the most popular browsers.

[kleinespelvids]

@trudoll Works fine with Chrome, Firefox, khtml based browsers. Don't know about Opera and Safari.

Doesn't work on IE, but I have to say, nothing works on IE. IE is just old now, as show the different browser statistics around the web.

[trudoll]

@kleinespelvids

thanks.

[kleinespelvids]

@trudoll For adding compatibility with khtml browsers, add this as well:

-khtml-border-radius:5px;

[icomironov]

Very nice tutorial, thanks mate it's easy and final result is great !!!

I 've searched for ready to implement CSS style, but with this lesson I could make it by myself:)

Thanks again very nice you are great teacher :)

[Pomidoras16]

Sveiki katik atsidare naujas Lietuviskas Counter Strike-Source serveris SERVERIO IP:78.62.67.129:27017

[soterescon]

thanks mate..

[Verbotten]

Just a tip: if you are working in Photoshop and want to make specific size box and avoid eyestrain create slices with Slice tool > click on i t> pops-up > enter dimensions > then create your box over it, the edges will snap on slice and will save you lot of time and frustration.

[adrigent]

I prefer the Tutvid method, cause it shows the actual code and how to write it.

Also it uses just one div, not three...

I guess they're just different.

[Verbotten]

@adrigent there's only one div because his rounded corners are NOT TRANSPARENT. if he had transparent rounded corners the transparent areas would OVERLAP BACKGROUND COLOR off the div. This would defeat the purpose of rounded corners and corners would appear SQUARE.

[vivek24864]

@adrigent , how can i get video of this method?

[daniellevi1]

tutvid is the best !

thank u !

[d1995a3]

You do realize that you could've just used a background of blue and a border radius of about 10px instead of going through all that trouble of making an image with Photoshop?

[WolfEyesatNight]

thanks Nathaniel

I was noticing that some programs that can can be added to dreamwever cs4-cs5 as extensions offer you rounded corners and slide shows with effects,

How do you make a slide banner with cs5?

I also noticed since dreamweaver cs3 the side to side movement effect was lost

thank you.

[heyudumbshit]

you are a total web HACK and a clown - why would you use 2 files TOP AND BOTTOM

I found a much better and smater technique that uses ONE file YOU HACK

youtube channel / thinkdreamweaver - why do you clowns teach BAD technique? or search rounded corner menu in CSS

[MusicByCJK]

@heyudumbshit THANKS A LOT ! This method by Tutvid was crap, and damn difficult ! Your link show an easy method WITH transparence ! Great ! Thanks a lot ! =D

[HassanHosendove]

Become a Photoshop pro! Learn all with best tips and tricks with these video tutorials - youtube.com/watch?v=wg-MqQwG5z­4

[geeno123]

Ok, I tried to use the same technique for a sample website I am building, but for some reason it doesn't work.. can you help me please?

[SquizzMedia]

@geeno123 i had the same problem r u using CS5!!

[geeno123]

@SquizzMedia try using the "webkit" method..that worked for me!

[linekill]

Hey. Thanks for this vid. Great tutorial.

Best thing about the vid is the tutor. English isn't my first language and yet you have a clear voice. And you sound excited which is even better.

[yasir25119918]

You can do this without any extra images by using -webkit-border-radius: value px in webkit browsers like chrome 5 or safari 5.

[supershrek99]

great videos tutvid. a few weeks ago css just confused the hell out of me. after watching your tuts i can now make a multi column page purely with css.

im running windows 7 on a macbook pro. does anyone know where the pound / hash key is?

[davehale007]

Does anyone know how to do this with Transparent background.

Tutvid good video, cheers.

(people who mention the pound sign, get a life!!)

[AshleyMcGowan1]

kool it wors but i can see strait threw the coeners that are see threw and it looks like a squere still is there any way of making the image inder and ontop of the box?

[overtext]

thanks for the vid....i'll go over to your site for the mother load

[scottik187]

I'm going to go ahead and say that this is a great video.

[acprzemu]

Zapraszam na serwer.

IP:91.204.163.150:27022

Only Steam+1000FPS

[jeahtherese]

very helpful! thanks so much for sharing this! =)

[glossy1133444]

hey i was just wondering have you done a tut on how to make photoshop PSD files in to css and html like a website template ?? i have been looking for tuts like that but there are no good ones :) x

[BlackTMstudio]

Click on me and discover my channel!

[alexmillar]

Thanks. this is well done: )

[kazu20091000]

Do you have to use pics, like a jpg ?

[inc2000glw]

@kazu20091000 - not everytime

[pitchwest]

sweet thanks man. you sound allot like... Andrew Kramer I think is his name? The guy that tutorials After Effects.

[EduardoU24]

1 word: css3

[JohnnyRock2000]

Just a thought...There is more complexity and thought that must go into web design than an average surgeon has to do to transplant a heart. On top of that, the coding will likely be obsolete within a few years. That being as it is, with all this knowledge and complexity of thought, the client may not like the design and ask for a complete re-do, with the instruction..."Try something a little more web-ish".

[YUMdeepfry]

Hey Nathaniel, Can this technique be done if all the coding is inside a div tag? Or does it have to be in the style definition like the way you did it?

[fl4rred]

it worked u leg end whats the dodgey advertisement that comes up thoguh its anoying

[pidge702]

you dont need images anymore

pure css

#divid{

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

[djpuente]

for mozilla this is true but for ie it doesnt work, thx tho for your hint.

[taoking]

One problem you have here. If you would have used a Trans Gif or PNG, then it would not have appeared as rounded, since the Trans image would have been on top of the background color.

[FFVImaster]

If you indented correctly, you wouldn't have to insert a comment specifying where the div tag ends.

[engeljakob]

cool beans dude!!!

[CptRor]

Cool beans XD Hot rod x3

[figthersword]

This tutorial is so awesome...... im a neophyte in html designing, i've got an A++ becomes of this code.. thanks a lot

[fitzgerald95971]

German Salsa House?WTF? LOL

[IncoherentTraveler]

This is a crime against nature! Shame on you!

[Seigu007]

whats with the surfer talk?

[NMRA]

my favourite thing about dreamweaver is that the guess code feature reminds you of your options, i hate trying to remember things! :P

cool tut

[Ziros2005]

nathe i just found out we can easily round it up with the coding.try this out

#divid{

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

[ejespinoza2]

@Ziros2005 This doesn't work on IE

[ShelterDogs]

Ziros, That's CSS3. Please correct me if I'm wrong, but I'm pretty sure Safari is the only popular web browser to support the "webkit" property. That's why you still have to do it the way tutvid has demonstrated here. Otherwise, no one will see your website the way you want them to.

[erfanullahjan]

I thought you are going to do it via coding...

[kwfine]

excellent tutorial, teacher!

[qaywsx075]

Nice and easy to understand tutorial.

[kitsap09]

Good video. However what about using this with a pre-built template that dreamweaver CS4 has?

[eschi2007]

Fett fett.. wenn ihr wollt könnta ja mal auf mienen server joinen xD

188.40.62.2:27099 ~*German Salsa House*~ [SOD][HlstatsX/FastDL] [Public]

[mymlmguru]

Goood! Stuff Tut, you always provide the solutions that I'm looking for....im subscribing today!

[ajinkyab1987]

actual css tut starts at 10:15.

starting 10mins r very slow n boring.

thanks for css guide :)

[marcolympics]

And how to make it for a website not 350 px but in %?

[melpa04]

definitely the best dreamweaver tutorial around, i'm addicted to tutvid :)

[cuzzz12]

@melpa04 no the best is html pro seris by edzjohson

[barrywilliamsmb]

Prior to watching your videos I was an old bugger paralyzed by the Ginormous Terror called CSS.

Now I am only slightly dazed and moderately apprehensive about it.

Thank you.

[der8lub]

why no shorthands?

like:

background: red url(source.jpg) no-repeat 0 0;

[Brorson1234]

looks soooo bad!

[der8lub]

shorthands look bad?.. hmm..

[Brorson1234]

Year! They look so stupid, while it looks more finished when not using shorthands!

[Nephil2012]

Couldn't u explain it in about 5 minutes?

[FirebrandNIRE]

Where's the fun in that? :)

[darwinahmad]

excellent tutorial tut, i really like it.

[bacardee]

great tut thanks

[oldskoolbeatsdotcom]

followed this but at that stage you add the bottom image it wouldnt show at all. I just had coloured box .

Location of the image is correct tried uploading to server and it still doesnt show , not sure where i went wrong

[prathy4u]

Greeeeeat video..thanx a lot

[tollpatsch1986]

5 stars =)

[PHPManTut]

you can type it in one line:

#rBox {

width: 350px;

background: #6085A7 url(roundedBottom.gif) no-repeat left bottom;

}

it's easier like this :P

[kanibal234]

thank you so much man!

[wasimsworld]

This symbol '#' is not a pound sign. It's called a 'Hash'

This is a pound sign '£'

[desmondo2006]

Nope, £ is called Pound Sterling and # is Pound

[Elliottslingsby]

That's called a hash.

[wasimsworld]

# sign is not widely recognised as a 'pound'. If you ask most people what this is £ they'll say 'pound' not 'pound sterling'. When i used to top up credit in my mobile phone with orange the recorded voice used to say, "After typing in your pin number type 'hash' " not pound.

How would you say this £4.99?

4 pound sterling and 99 pence?

I just say four pounds ninety nine.

[desmondo2006]

Yeah but, in serious terms it is 4 pounds sterling  99 pence.

[wasimsworld]

Yeah I agree but it's like being fusyy about the spelling of the word 'yes' for example. We both spell typed 'yeah' even though really it should be 'yes' but it 's kind of pointless having to say it in serious terms but I see what you mean.

[TheFlyingCookies]

"#" is sometimes considered the pound sign. When I want to adjust my voicemail settings it says something like "Press pound to *insert something here* "

[wasimsworld]

Oh OK .. cool !!!

[release2]

It's not one or the other.. it has different names depending on where you are in the world and its context. I for one have never heard it been called a hash, since I live in US.

In the US, it is the pound symbol. In the UK, it is a hash. In music, it's called a sharp.

-

Thx for the tut, btw

[wasimsworld]

That's explains why I thought it was called a hash then.

[lostvisualfx]

@wasimsworld Actually, that is the pound symbol. Learn about the telephone symbols before you act like you know jack shit.

[wasimsworld]

@lostvisualfx It's the number sign or pound sign or hash sign depending on how or why it is used. Look it up "before you act like you know jack shit."

[PlanetShhhh]

@lostvisualfx bit harsh, learn about cultural differences before you get rude.

In Britain, our pound sign is £ because it's our currency so no one is wrong.

This is the kind of thing that makes Americans disliked in certain parts of the world.

[PlanetShhhh]

@wasimsworld must be an American thing. I'm British too and our pounds are like this ££££££££

[wasimsworld]

@PlanetShhhh Yeah exactly. Thanks. I wandered for a moment whether it was me just going crazy and I even wrote down @1.99 but it just didn't look like 1 pound 99. £1.99 looks more like it. Oh well !!! good css video though.

[XDattitudez]

@wasimsworld :L hes american so i guess they call a hash a pound there i guess your english or european????? or am i wrong.

[indokronik]

@wasimsworld

it's called a pound sign as well.

[AndyBuckleTuts]

@wasimsworld no in some cases it is the pound symbol but because other countries don't know what a pound is they say the # key is the pound symbol because on an american keyboard the # is where the £ symbol is on a UK keyboard

[Michael0808Milo]

@wasimsworld the pound sign in US and Canada is #...

[wasimsworld]

@Michael0808Milo Which one of these would you call : One Pound and Ninety Nine Pence? A or B

(A) £1.99

(B) #1.99

[Michael0808Milo]

@wasimsworld When we say pound in the US and Canada we are not referring to currency... Pound refers to the "Number Sign" which is #...

Why would we say pound to mean money when we don't use your currency.

ffs, Arrogant brits. Think the definition for words they use is the only definition.

[wasimsworld]

@Michael0808Milo No it's not because we think the definition for words we use is the only definition. It's because your use of the word POUND is the SAME as our currency. Get it? Which is why I thought it was wrong.

In other words if I called this sign # "Dollar" you may think it might be wrong if you are from USA where you currency is also in "Dollars".

Go online and ask anyone ANYONE, "What is a POUND sign?"

[Michael0808Milo]

@wasimsworld Also Pound or for short lb can mean a measurement of weight. "I weigh 170lb" 170 Pounds... Though if I said that in Britain I would probably be robbed if someone heard me saying it, thinking I had 170 Pounds in my pocket...

[wasimsworld]

@Michael0808Milo So you thought this tutorial was worth some serious #'s yeah?

[peesant]

@wasimsworld ur argument would be very logical if this video was abt stocks/forex trading et al.... just appreciate the corrections n learn something :)

[peesant]

@wasimsworld it is in coding language. dont rush 2 correct if ur not sure.

[wasimsworld]

@peesant Aaaahh I don't think anyone else knew that. I certainly didn't. Thanks !!!

[sleepyerick]

@wasimsworld ...and a "SHARP"

[Verbotten]

@wasimsworld They call this - # a pound in telecommunications industry

[tirathmistry]

Thanks! There's so much to be learned from your tutorials. Anyone offering their skills is appreciated, and none are better than yours.

*clap clap!!!!

Keep up Good work man

God bless you :-)

[tirathmistry]

You make GREAT tutorials. Awesome job and thanks.

You make everything look easy. i love your tutorials!

i ve seen so many tutorials in so many languages by so many ppl, and yours is by far the best, not just because what you do is technically superior than others, but becos u are able to explain so clearly that even a newbie like me can look good

God Bless you :-)

[ndrunkenTeddy]

i ♥ ur voice :)

[tiberisland]

Great Video, Is it possible to create the rounded expanding box by just using the CSS dialog box and avoid writing code?

[MBlu3]

dude, can't you just speak normal?

it's annoying ,srsly

[Remiss63]

Good, clear, concise. Helpful as an example of CSS coding.

[isiegel]

CSS3 rounded corners - done and done in 1 minute. Does it have to look the same in all browsers? No! :)

[nabilion2099]

how to airbrush using photoshop

[dud3thathurtpictures]

god dont you just love this voice? :D

[khuram855]

What software did you capture with!

[yoyojonathan]

camstacia

[04rossca]

? Dont you mean Camtasia

[jp9512]

probably camstasia.... arent many other program that record with that kind of quality

[matbonbon]

you can do this effect with css3 for Safari,Chrome and firefox and javascript for explore in 5minutes

[LuXxenatorX]

17 minutes for rounded corners? fuck that

[willzurmacht]

Thank you so much!! :D

♥

[piemonk8]

i got no sound and its turned on

[68kaspar]

Thank You!

Great job

[IMPMAC]

Fireworks is better for doing rounded corners I think.

[IMPMAC]

Does not work with IE or opera.

[xBlyth]

nice tut, i prefer to do it with single corners though so you can use it over and over again on any size box.

[SqueeG19]

AGH! THANK YOU SO MUCH!!!

[hdvidsonly]

Nice tutorial, thanks man.

[soulisland]

In reality this should work with any thing but dreamweaver as well as dreamweaver... wtf?

also dude their is css for this you don't need to create your own images

[hope1light]

how could you do it without images?

[antorobertson]

you dont need images if its a solid color. just do -moz-border-radius:10px in your css and for chrome its -webkit-border-radius:10px; in your css file, thats with no images and flat colors.

[NikkexD]

Doesn't work in IE. Just take a look at youtube in internet explorer, and then in firefox. You'll notice a difference.

[antorobertson]

yea but no one cares about ie. just make a different css using the images, instead of one big image use small corners and position them

[NikkexD]

Good point there. You could also use javascript. There's a script called DD_roundies which is just great for making rounded corners. The same person who coded that also coded another script called DD_belatedPNG which fixes PNG transparency in all browsers.

[ttk1opc]

I just use moz-border-radius and webkit-border and just say screw it to anyone using IE. Or use jquery and screw anyone with js turned off.

[hkrw0mrgiggles]

Nice video once again.

[revolutionize017]

im using ultraedit.

[louismartinc]

use CSS not gfx!

In order for top and reverse for the bottom

div.roundCornerBlue1 {height: 1px;background: blue;margin: 0px 5px;}

div.roundCornerBlue2 {height:1px;background:blue;bo­rder-right:2px solid blue;border-left:2px solid blue;margin:0px 3px;}

div.roundCornerBlue3 {height:1px;background:blue;bo­rder-right:1px solid blue;border-left:1px solid blue;margin:0px 2px;}

div.roundCornerBlue4 {height:2px;background:blue;bo­rder-right:1px solid blue;border-left:1px solid blue;margin:0px 1px;}

[Flashfarm]

wow dreamweaver what a nub ur not a real webdesigner unless you use notepad

[TheGrayK]

Thats stupid A real webdesigner will use whatever tools help him/her achieve their goal as fast as possible to meet a deadline and let me tell you notepad doesnt do that.

[rosstejero]

What an idiot, no professional web designer would ever use notepad on his project. Please first get a job as a web designer and maybe then youll understand why notepad wont help you a lot.

[RicochetArt]

hahaha you couldnt bee more wrong flashfarm, a beginner webdesigner uses notepad, while an advanced one uses dreamweaver for time efficiency purposes.

[KINGV3NOM]

dw is for pussies. notepad ftw

[notta3d]

No, driving motorized vehicles are for pussies. Walking FTW!

[KINGV3NOM]

I use a scooter.

[calypse550]

No....you'd be an idiot to pick notepad instead of DW. I think people look for results and ease instead of trying to act cool on youtube claiming to use notepad.

[alexleecheeseng]

I script my websites using pure binaries.

[SqueeG19]

we use it because it's faster for our jobs and it helps us keep our code valid when validating

[jmm1233]

bevel curve ftw

you can also make vector object in illustrator to make a moveable object (square) in css :)

[dobleache52]

I hate web design, but you make easy for us. THANKS