Hey guys! In this tutorial we will take a look at creating a fixed width, rounded corners text box using two simple images we create in Photoshop. You will learn a little about writing CSS code and working with images and CSS as well as some other cool useful tips and tricks. Follow me on Twitter! www.twitter.com Be sure to check out www.tutvid.com Check out the blog @ http

Leave a Reply

Your email address will not be published. Required fields are marked *

*

25 Comments

  • YUMdeepfry 10 years ago

    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 10 years ago

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

  • pidge702 10 years ago

    you dont need images anymore
    pure css
    #divid{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

  • respectyourlove 10 years ago

    Best CSDM

    W W W . C S S R O Y A L . T E N . L T

    NO CHEATS

    players 32

    ping 2-10

    IP 84.240.44.220:27015

    Good game for you and don’t cheat

  • taoking 10 years ago

    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 10 years ago

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

  • ShelterDogs 10 years ago

    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.

  • engeljakob 10 years ago

    cool beans dude!!!

  • ejespinoza2 10 years ago

    @Ziros2005 This doesn’t work on IE

  • figthersword 10 years ago

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

  • fitzgerald95971 10 years ago

    German Salsa House?WTF? LOL

  • IncoherentTraveler 10 years ago

    This is a crime against nature! Shame on you!

  • Seigu007 10 years ago

    whats with the surfer talk?

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

  • Ziros2005 10 years ago

    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;
    }

  • erfanullahjan 10 years ago

    I thought you are going to do it via coding…

  • kwfine 10 years ago

    excellent tutorial, teacher!

  • qaywsx075 10 years ago

    Nice and easy to understand tutorial.

  • kitsap09 10 years ago

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

  • eschi2007 10 years ago

    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]

  • wfareed 10 years ago

    very nice and simple tutorial

  • mymlmguru 10 years ago

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

  • Brorson1234 10 years ago

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

  • der8lub 10 years ago

    shorthands look bad?.. hmm..

  • Brorson1234 10 years ago

    looks soooo bad!