Most used CSS Tricks

Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know

1. Rounded corners without images

"r1"> "r2"> "r3"> "r4">

"r4"> "r3"> "r2"> "r1">

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

Rounded corners without images

2. Style your order list

  1. This is line one

  2. Here is line two

  3. And last line

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;

Style your order list

3. Tableless forms

"name" name="name">

"address" name="address">

"city" name="city">

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;

label {
text-align: right;
width: 75px;
padding-right: 20px;

br {
clear: left;

CSS Tableless forms

4. Double blockquote

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;

Double blockquote

5. Gradient text effect

CSS Gradient Text

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;

Gradient text effect

6. Vertical centering with line-height

div *{
div p{

Content here

Vertical centering with line-height

7. Rounded corners with images

"tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />

"bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;

.roundcont p {
margin: 0 10px;

.roundtop {
background: url(tr.gif) no-repeat top right;

.roundbottom {
background: url(br.gif) no-repeat top right;

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;

Rounded corners with images

8. Multiple class name

"image.gif" class="class1 class2" alt="" />

.class1 { border:2px solid #666; }
.class2 {
9. Center horizontally


#container {
margin:0px auto;

Center horizontally

10. CSS Drop Caps

"introduction"> This paragraph has the class
If your browser supports the pseudo-class
"first-letter", the first letter will be a drop-cap.

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;

CSS Drop Caps

11. Prevent line breaks in links, oversized content to brake


12. Show firefox scrollbar, remove textarea scrollbar in IE