Need someone to lead product management at your software company? I build high-craft software and the teams that build it. I'm looking for my next opportunity. Check out my resume and get in touch.

This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.

User Experience

Rounded corners in CSS

Freshness Warning
This blog post is over 21 years old. It's possible that the information you read below isn't current and the links no longer work.

I was talking to Jesper about the dotted CSS borders trick and the subject of rounded corners in CSS came up so I showed him my method. There are other ways that I’ve seen it done, but the other methods always require lots of complex HTML and CSS. I figure that lots of nested divs aren’t much better than using a table, so my way doesn’t require much in the way of HTML or CSS. Here’s how I do it.

Create four images for your corners. Most graphics programs have a tool that will create rounded-off squares. I’ll be using this square here…

…and I’m going to cut off the corners to get my four images:

In the spot where I want the box to show up, I create a container div to hold the box, a div for the top row and a div for the bottom row. Between the top and bottom rows, I add my content. In the top and bottom row divs, I add the left corner image and set the inline style to read display: none;. This makes the image invisible unless I make it visible through the stylesheet. That way, I can hide the effect from incompatible browsers by not showing them the stylesheet.

<div class="roundcont">
   <div class="roundtop">
	 <img src="tl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p>
  
   <div class="roundbottom">
	 <img src="bl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>
</div>	

The CSS sets the width and background color of the container object and the color of the text inside. The margins on interior paragraphs are set so that the text doesn’t sit right up against the edge of the box.

Then the top and bottom divs are given a background image that contains the right corner images and the left corner images from the HTML code are enabled.

.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;
}

Here’s how it looks when it’s all put together.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This works in IE6, Mozilla 1.3, and Opera 7 on Windows. It should work in most other modern browsers as well.

Update: Julian Bond asked if this will work with the container div set to 100% width. Here’s the box again. The only thing changed is the width of the roundcont class.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Recently Written

Lighten Your Process Burden
Dec 7: Everyone hates oppressive processes, but somehow we keep managing to create them.
Product Add-Ons Are An Expansion Myth
Dec 1: Add-ons can enhance your product’s appeal but won’t drive significant market growth. To expand your customer base, focus on developing standalone products.
Protecting your Product Soul when the Same Product meets New People.
Nov 23: Expand into new markets while preserving your product’s core value. Discover how to adapt and grow without losing your product’s soul.
Building the Next Big Thing: A Framework for Your Second Product
Nov 19: You need a first product sooner than you think. Here's a framework for helping you identify a winner.
A Framework for Scaling product teams
Oct 9: The people, processes, and systems that make up a product organization change radically as you go through the stages of a company. This framework will guide that scaling.
My Networked Webcam Setup
Sep 25: A writeup of my network-powered conference call camera setup.
Roadmap Outcomes, not Features
Sep 4: Drive success by roadmapping the outcomes you'll create instead of the features you'll deliver.
Different roadmaps for different folks
Sep 2: The key to effective roadmapping? Different views for different needs.

Older...

What I'm Reading