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.

 

 

 

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

Filters, for example:



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

Reply

Very interesting. I thought the tutorial was really good (I still think it) but the link to the explanation to do the same effect without images itīs impressive!

I think Iīll learn some CSS with time and nice people like you.

Reply

I went to your site for tutorials, of course the link was from your signature and when I visited your webpage the tutorial is redirecting me here.

Now my comment: Really nice and helpful. Thanks for sharing it here. I have been using table to place curve images. And loading time is taking much... CSS always come in handy in this kind of situation.

Reply