• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

Dreamweaver Tutorial: Rounded Corner Borders with Adobe Dreamweaver

Written by Gabriel on June 7, 2012

Learn How to Add Rounded Corners to Adobe Dreamweaver CS5.5 Websites

In this tutorial, you will learn how to use CSS rules to generate rounded corners anywhere on a Dreamweaver website.

What is a Border Radius?

CSS3 is the most recent iteration of cascading style sheets and it affords designers more efficiency & versatility. Rounded corners are used everywhere on computers, so why not do it with your Dreamweaver websites too?

How do rounded border corners look & function in a Dreamweaver website?

Below is an example to demonstrate the CSS border radius properties.

This is a <div> with 3 rounded corners

The border radius function can be used on any HTML element that can display a border.

Note: Internet Explorer does not currently render CSS rounded corners

Step 1: Select an Element to have Round Corners

If you are working with an existing Dreamweaver webpage, decide which element(s) should have rounded corners. For those just getting started or unsure how to use this CSS rule, create a new div with an id or a class to control the look of the div with CSS. Use this rule to set a background color, width and height. Giving the div a color and size will help us clearly see the div we are currently working on.

Step 2: Add the Border Radius Properties to Your Dreamweaver Webpage

Now that there is an element with a CSS rule to control it visually, you can add the border radius properties. Dreamweaver doesn’t yet support the border radius functions, so the properties must be manually added to the style sheet.

Below is a tool for generating the necessary CSS code to create the border radius desired for your Adobe Dreamweaver website. At each corner there is a number referring to the dimensions of each rounded corner. Choose a value for each corner and once you’re satisfied with the dimensions, copy all of the code shown in the center.

Return to Dreamweaver once the code has been copied. Now that we have the code ready to paste into the CSS rule, we must place the cursor in the correct place before pasting the new properties. To do this, go to the Dreamweaver CSS Styles Panel and right-click on the CSS rule to be edited. In the contextual menu (right-click menu), choose “Go to code.” Doing this places the cursor somewhere in the code for that CSS rule. Move the cursor to the end of the line it is on and create a new line by pressing the return key. With the cursor on an empty line, paste the border radius code and save. Now it’s time to test in a browser! If you want to change the dimensions and paste it again, you can remove the code you entered by highlighting and deleting it or use the Edit > Undo function.

Posted in Adobe Dreamweaver

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients

Timerline Truck & Trailer Logo

BTNT Envelopes

Take the first step

Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!

Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

523 N Higgins Ave, Missoula
Courtney Firak 2 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
PHC Missoula 3 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
Ronald Richker in the last week
The website that was built for us does not work on all browsers. Specifically, the product configurator, the most important part of the website, produces an error on older browsers. Very disappointed and frustrated.
Libby Addington 8 months ago
Gecko brings an immense amount of talent and expertise to any project, adding value and saving us time at every step of the process. We've been blown away by their balance of creative capability (across strategy, ideation, design and execution) with impeccable execution, on time and on budget every time. Can't recommend them highly enough.
Mark Thome 5 months ago
Gecko Designs had us at the lead phrase on their home page: "If you're tired of flakey freelancers and want to work with a team of professional, reliable experts, you've come to the right place!" We were at that point developing our site that we needed to step up to a professional team with a demonstrated portfolio of blue-chip sites, and the expertise to help bring our crazy ideas to fruition. We're looking forward to The Missoula Underground being a vital part of the Northwestern Montana scene, and the first step was picking up the phone and having a conversation with Gabe. Don't hesitate to hire their team, they are ACES at web design and development. Thanks, Gecko!
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Fall 2020! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123