Setting a line-height the same value as the height of the div will show one line of text vertically centered. In this example the height and line-height are 500px. Example JSFiddle .circle { width: 500px; height: 500px; line-height: 500px; border-radius: 50%; font-size: 50px; color: #fff; text-align: center; background: #000 } <div class=”circle”>Hello I am A … Read more
Here’s a demo: http://jsfiddle.net/thirtydot/JJytE/1170/ CSS: .circleBase { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don’t care about IE8 */ } .type1 { width: 100px; height: 100px; background: yellow; border: 3px solid red; } .type2 { width: 50px; height: 50px; background: #ccc; border: 3px solid #000; } .type3 { width: 500px; height: 500px; background: aqua; … Read more
How does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels? Let’s reformulate that into two questions: Where do width and height actually apply? Let’s have a look at the areas of a typical box (source): The height and width apply only on content, if the correct … Read more
SVG approach: You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn’t allow curved shapes. The following example uses the <path/> element with: 2 quadratic bezier curve commands for the 2 top curves (lines beginning with Q) 1 arc command for the big … Read more
I want this word to be drawn with an animation, such that the page “writes” the word out the same way that we would Canvas version This will draw single chars more like one would write by hand. It uses a long dash-pattern where the on/off order is swapped over time per char. It also … Read more
Here’s a demo on JSFiddle and a snippet: .numberCircle { border-radius: 50%; width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } <div class=”numberCircle”>30</div> My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care … Read more
Almost 3 years later, I finally made the time to revisit this and post an improved version. You can still view the original answer at the end for reference. While SVG may be the better choice, especially today, my goal with this was to keep it just HTML and CSS, no JS, no SVG, no … Read more
CSS Triangles: A Tragedy in Five Acts As alex said, borders of equal width butt up against each other at 45 degree angles: When you have no top border, it looks like this: Then you give it a width of 0… …and a height of 0… …and finally, you make the two side borders transparent: … Read more