Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Shapes

Circle

That’s something of an illusion, though. The division is actually 120 x 120 pixels, so it’s square. Giving a square shape a border radius of half the length of the sides and adding a background color creates the look of a circle.

Sneaky design trick, huh? I centered the text so it's in the middle of the circle, otherwise it would start in the upper right corner of the division outside of the circle. More on how I did that coming up, but first here’s the CSS code for the circle:

.circle {
   width: 120px;
   height: 120px;
   background: #f8a506;
   moz-border-radius: 60px;
   -webkit-border-radius: 60px;
   border-radius: 60px;}

Lines 5 & 6 are vendor codes to create rounded corners in older browsers. The true CSS border radius is in line 7. The CSS standard should always come after the vendors codes for the same property so the CSS has priority over the vendor codes.

Remember, the background is a circle shape, but the division itself is still square. If you add text to the circle the text will flow outside of the circle unless you do something to contain it within the circle.

With a small circle it would probably be best with just a word or a few words centered in the circle. A single, large character like a ! or a ? would work well as an attention-getter for a an important message.

It would be a bit of work, but you could create a larger circle you and set the padding line-by-line to have the text go edge-to-edge inside the circle. I'd make a graphic if I wanted that, though.

To use that circle on a web page, just add the class name to a division or paragraph tag.

<div class="circle" 
style="float: left; 
margin-right: 20px; 
font-size: 10px; 
padding: 55px 0; 
text-align: center;">
No Image Used
</div>

If you didn't want any content inside the circle you could eliminate everything in the style attribute except the float property and value. You could eliminate that, too, if you don't want text to run alongside the circle.

The text-align: center; property and value centers the text horizontally. The padding: 55px 0; centers the text vertically. The division is 120 pixels tall, the text is set to 10 pixels, so 10 from 120 is 110. Half of 110 is 55, so that's how much padding was needed to center the text vertically.

Oval

Again, that’s not an image, it’s just CSS.

This works on the same principle as the circle. The border radius is set to half the length of each side.

The (somewhat) obvious difference is the border radius is applied to a rectangle instead of a square. That gives it the oval shape. From this point on I'm going to give you the HTML and CSS in one code box. When you hit the copy button you'll be both pieces of code. Here's the oval:

 --The HTML --
<div class="oval" 
style="float: left; 
margin-top: 27px; 
margin-right: 20px;">
</div>

-- The CSS --
.oval {
   width: 200px;
   height: 100px;
   background: #2c4d41;
   background-image: linear-gradient(to bottom, #56B678 0%, #2c4d41 100%);
   -moz-border-radius: 100px / 50px;
   -webkit-border-radius: 100px / 50px;
   border-radius: 100px / 50px;}

When two values are present in the border-radius property, the first value is the horizontal radius. The second value is the vertical radius. Setting them to different values as I did creates an oval when the containing element is a rectangle. But again, each was set to half the length of the side where it was used, thus creating a perfect oval.

If the second value is omitted it is copied from the first. If either length is zero, the corner will be square.

Each corner can be set independently using these properties:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Shorthand can also be used:

border-radius: 10px 20px 10px 30px / 5px 15px 10px 20px;

In that example, the first four values (before the forward slash) define the horizontal radii for all four corners. The second set of values (after the forward slash) define the vertical radii for all four corners. If only one set of values are present, these represent both the vertical and horizontal radii equally.

If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii, in that order. In that example, the code is the same as:

border-top-left-radius: 80px 10px;
border-top-right-radius: 20px 40px;
border-bottom-right-radius: 25px 10px;
border-bottom-left-radius: 30px 20px;

Forward Lean

Both sets of code in the same codebox again.

 --The HTML --
<div class="forward-lean" 
style="float: left; 
margin-right: 20px;"></div>

-- The CSS --
.forward-lean {
   width: 200px;
   height: 100px;
   background: #299DE2;
   background-image: linear-gradient(to bottom, #299DE2 0%, #135E8A 100%);
   -moz-border-radius: 170px 30px;
   -webkit-border-radius: 170px 30px;
   border-radius: 170px 30px;}

Warning Triangle

How about a warning triangle…

Kind of like the porridge Goldilocks tried out at the three bears house.

In any case, it doesn’t look bad, it just doesn’t look perfectly placed in some browsers.

Here are both parts of the code for the warning triangle:

 --The HTML --
<div class="triangle">
<p class="exclaim">!</p>
</div>

-- The CSS --
div.triangle {
  float: left; 
  margin-right: 50px; 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 100px solid #dd0000;}

p.exclaim {
  font-family: Verdana, sans-serif; 
  margin: 0; 
  position: relative; 
  top: 10px; left: -11px; 
  color: #fff; 
  font-weight: bold; 
  font-size: 55px; 
  text-shadow: 1px 1px 3px #000;}

Three More Oval-ish Shapes

I coded those inline so beginner coders can see how it's done. Here's the code for all three:

 -- Red One --
<div style="float: left; 
margin-right: 22px; 
width: 180px; height: 100px; 
background-color: #a31f35; 
background-image: linear-gradient(to bottom, #bc384e 0%, #a31f35 100%); 
-moz-border-radius: 100px; 
-webkit-border-radius: 100; 
border-radius: 100px;"></div>

 -- Brown One --
<div style="float: left; 
margin-right: 22px; 
width: 200px; height: 100px; 
background-color: #58401f; 
background-image: linear-gradient(to bottom, #715938 0%, #58401f 100%); 
-moz-border-radius: 100px / 30px; 
-webkit-border-radius: 100 / 30px; 
border-radius: 100px / 30px;"></div>

 -- Navy One --
<div style="float: left; 
margin: 0 0 22px 0; 
width: 200px; height: 100px; 
background-color: #081b29; 
background-image: linear-gradient(to bottom, #213442 0%, #081b29 100%); 
-moz-border-radius: 30px / 90px; 
-webkit-border-radius: 30 / 90px; 
border-radius: 30px / 90px;"></div>

I had one more I was going to add, speech bubbles, but it's somewhat long and this one is already long so I'll save that for another tutorial. I'll just close this out by gently suggesting if your CSS shapes turn out like the one below you might need a little more practice.