Today's tutorial is meant for spicing up graphical looks of textarea in our websites. Instead of plain squared edges we will gain rounded edges. Result of this tutorial will look like this:



So let begin with CSS file. First we will define body:



We have choosen that our body background will be white (#FFFFFF). Cause we will be using rounded corners for our textarea with background color bright blue (#B4D5ED). Rounded corner's images are:

Topleft
Topright
Bottomright
Bottomleft

We will embed then into our textarea, next pictures is showing us how it is done:



It is like pilling onion. In HTML. If we look at text which is defined with class TEXT which is relativly looking at the top, then we have class TOPLEFT, TOPRIGHT, BOTTOMRIGHT and BOTTOMLEFT which are in sequence from topleft clockwised to bottomright, at the bottom lies class TEXTAREA which is cover with other classes and being formatted that way.



So documents starts rendering with BODY and goes towards up to last class, which is TEXT and all classes (or ID) are closed with </div>. I see this as pyramidal structure.

So HTML file looks like this:



Textarea is defined in CSS with next code. There is no padding (if there was any then your background would be corrupted). Background is set to #B4D5ED and width to 300px.



Div classes for rounded edges are name with TOPLEFT, TOPRIGHT, BOTTOMRIGHT, BOTTOMLEFT. They are almost same code, so I will explain only one.

So here is code for all divclasses of rounded edges. As we saw at beggining we have background images that are named same as div classes. Margin and padding is set to 0, cause we don't wanna have corrupted background, url is defining relative path to your background image. Position is declared for class TOPLEFT with code: top left no-repeat. This defines topleft positon and no-repeat, cause we wanna for every image to be presented only once. Same goes for other div classes, only position is changes and name of image file.



Code for text is next. This rather formatting of text, important thing is that we used padding of 10px to have same space around text.



Working example is available: here.
CSS file is available: here.

Any suggestions are welcome.
Best regards.

Nice tutorial. I see you are pretty good with CSS. Funny how i was looking for a tutorial like this. Anyway, thank you. 10/10

When I read this i thought you mean input textarea, But anyway, awesome tutorial, plain and simple, easy to follow.

With small workflow it can be used for input textarea too.

Not trying to rain on your parade, but you can accomplish the same effect through CSS without images.

Dammit, Tyssen. I am always two steps behind you
I wonder how would you make shadows without images
Thanx for link, It was educational.

Shadows are easy, use layers.... one dark, one light....

Filters, for example:



This may only work for IE. For some reason it wont work without the height property.