wellrounded logo

What is WellRounded?

WellRounded is a Dreamweaver extension that creates easily resizable rounded rectangles you can use to frame your content. The rounded rects are not single static graphics, they are sliced graphic pieces in combination with modern CSS code. WellRounded generates an infinite variety of looks based on your choice of color, stroke, border, drop shadow, corner radius, etc. Once a rounded rect is added to the page you simply type or paste content into it.

Why you need it

Rounded rects are great for visually hilighting or separating content. Creating a rounded rect is simple in a graphics program, but making them work on web pages presents a host of challenges that graphic designers often don't anticipate if they are just handing a design over to a web guru.

  • What's the best way to slice up a rounded rect for web display?
  • How can extensive work be avoided in the event of even small changes to the look of the rect?
  • What happens if the content of the rectangle grows or shrinks?
  • What is the most efficient way to represent a rounded rect?
  • Will a rounded rect display properly in Dreamweaver to ease authoring?
  • Will a rounded rect display correctly in all browsers?

WellRounded takes care of all of these problems. It generates rects within Dreamweaver, so last minute changes can be rapidly made without jumping back to a graphics application and re-slicing. WellRounded rects work across all popular browsers and can grow and shrink dynamically based on the amount of content. WellRounded rects also use highly efficient corners and tiling so download remains zippy. Multiple WellRounded rects of the same style even share their graphics and CSS code for minimum download size.

Download and Try It!

WellRounded is an unlockable demo and is not time-limited in any way. Go ahead and try it out for yourself.

Download WellRounded

Be the first on your block to buy it!

WellRounded is no longer available for purchase.

Features

  • Insert round corner rects directly into your Dreamweaver web pages.
  • Appears as a tool in Dreamweavers layout toolbar.
  • Settable corner radius
  • User settable feathering
  • Width can be adjusted directly within the Dreamweaver UI
  • Rect height can optionally be made to grow with content.
  • Borders with width and color.
  • Drop shadows with feathering, offset, and color.
  • Inner shadows with feathering, offset, and color.
  • Preview Window to see the result before creating files.
  • Outputs .gif files to the directory of your choosing.
  • Outputs valid XHTML 1.1 into the <body> of your document, and valid CSS into the <style> section of your document.
  • Supports re-use. Once a round corner rect is defined WellRounded can re-use it over and over within your document with no more graphic files or CSS created.
  • WellRounded round corner rects work in all modern browsers (Opera, Safari, Internet Explorer, Netscape, Firefox, and more).
  • The rects from WellRounded can easily be adapted to be inline elements with liquid layout.
  • Available for Dreamweaver MX, MX2004, DreamWeaver 8, CS3, and CS4 -- MacOS X* and Windows.
  • *NOT available for DreamWeaver CS3 or CS4 on Intel-based Macs at this time

Screenshots

toolbar

WellRounded appears in the Layout toolbar just like any other Dreamweaver tool.

div dialog

Here is a screen shot of two main dialogs you see when using WellRounded. Click on them to enlarge.

new round rect in DreamWeaverHere is what you might see in Dreamweaver after inserting a WellRounded rect. WellRounded rects can 'wrap' existing content if it is selected when you insert. But if there is no selection, we insert some info for you.

Demos

Let's see some rounded corners, shall we?

sample one sample two sample three

The first one uses a two column layout and nice liquid layout technique to size the round cornered WellRounded rectangles to their content and the browser window. We have a tutorial for using WellRounded in this fashion here.

The second one shows off some different round corner rects made with WellRounded

The third sample shows off some nice looks where WellRounded rects are made with the same foreground and background color. The shadows and borders can be used alone to made some very impressive round cornered rects. This demo also uses floats to make a simple header and three column layout using WellRounded rects as containers. Because they scale so well, WellRounded rects work extremely well in liquid layout situations where the container needs to adjust to the size of the content or browser window. There is a tutorial for building this sample.

Tutorials

Your First (and second) WellRounded Rect

A simple walk-through of using WellRounded. Shows the dialogs, basic re-use of WellRounded classes, and how you can use WellRounded to wrap selected text in a new rounded rect.

And End To Absolute Positioning

The above tutorial goes through the basics of making WellRounded rects that don't use absolute positioning

Floating Columns Of WellRounded Rectangles

This tutorial goes through making a three column liquid layout using WellRounded rectangles. Fun!

Embedding WellRoundeds

This tutorial uses the techniques of the previous three to show how WellRounded rects can be embedded into one another. We also use a 'margin reserving' technique to add a sidebar to the right side of the document.

 

Documentation

You'll find the docs here. It includes overviews of all the UI elements as well as an analysis of the WellRounded graphics, HTML, and CSS.

FAQs

Here is a list of Frequently Asked Questions (with answers).

Support

Didn't find your question on the FAQ page? WellRounded technical support is provided through email. We've a great team of some really bright guys plus some guys who aren't terribly bright but mean well, and Phillip. We prefer that customers look over the documentation and the FAQs but if you can't find what you are looking for, don't fume and don't waste another minute of your time. Send an email to help@medialab.com. Be sure to mention which product you are having trouble with, your platform and version of Dreamweaver. Emails are guaranteed to be answered within 24 hours to the next business day, but are usually answered much much quicker.

Other Web Products

What do you think of WellRounded? We'd love to know.

If you like it then you might like our other web-oriented products. We have two very popular and very powerful Photoshop plug-ins: PSD2FLA, which saves layered editable Flash .fla files directly from Photoshop, and SiteGrinder, which creates top-notch XHTML 1.1/CSS web sites from designs in Photoshop. Give 'em a look.

If you are a Dreamweaver user, the odds are high that you might also be using Macromedia Director. In which case, you should really check out AlphaMania and the Effector Sets which are Xtras for doing real-time interactive special effects in Director, and PhotoCaster a full featured Photoshop file importer.