Member Avatar for ssharish2005

Hi everyone,

I am designing a web site for my company for which i am working for. But i am still learning these web stuff which i haven't done before. So got to learn very soon before i get more project. I can do some basic stuff but not too much. Any way i have question about designing stuff.

Well, almost most of the web sites uses tables with their edges curved and stuff and with the button edges curve. How do we do that. Can any one please explain me how to do those sort of design, which might help in creating good web site.

thanks in advance

ssharish

  • 3 Contributors
  • 4 Replies
  • 179 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

A short, practical update to the options already discussed by , and : the image-in-a-3x3-table trick that describes works and was common practice in 2006, and some JS libraries (as mentioned by ) were used to fake rounded corners. Modern practice is much simpler and more robust: use CSS border-radius for most cases, reserve image corners only when true pixel-perfect, transparent-edge art is required, and use SVG/clip-path for complex curves.

A minimal, copy-paste example that reproduces an image-style rounded box with little fuss:

.mybox {
  background: #fff;
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Troubleshooting notes and gotchas tied back to the earlier replies:

  • Keep a background color on the rounded element so corner anti-aliasing blends correctly; if a parent background pattern must show through, use background-clip as needed.
  • For elements with children that must be clipped to the curve (images, floats), add overflow: hidden.
  • Fixed-width table layouts (the old 3x3 approach) break on responsive/mobile layouts; prefer block-level elements and flexible CSS for modern sites.
  • Very old browsers that lack border-radius (legacy IE) can be handled either by the image-corner method shown by or by a small polyfill if supporting them is required — otherwise graceful degradation (square corners) is acceptable.

Practical workflow: start with border-radius for buttons, panels and images; test in current browsers and devices; introduce SVG or the image-table method only when a specific design requires it. This preserves accessibility, responsiveness and far less maintenance than image-heavy tables.

Recommended Answers

All 4 Replies

Member Avatar for Member #114696

Well to do that there are three ways:

1. Use Javascript ( = right choice recommended)
2. Use tables and images( = headache)
3. Use CSS3 ( = foolishness )

here's a link which may help you:

Member Avatar for roryt

I think seen as you are new to this stuff images are probably the best plan instead of learning endless code languages. Do you have any knowledge in graphics at all because I am happy to take you through how to do what you want. Please post a site that you like that uses the ideas you are interested in. We will make sure you can achieve what you want.

Member Avatar for ssharish2005

I think seen as you are new to this stuff images are probably the best plan instead of learning endless code languages. Do you have any knowledge in graphics at all because I am happy to take you through how to do what you want. Please post a site that you like that uses the ideas you are interested in. We will make sure you can achieve what you want.

Roryt, Thanks very much. Well i dont have that much knowledge about graphics and thing. Just the basic stuff. I would really appricate your help.

There isn't specific website for me to go through. You know which one is best for the starters. Lets go along with any one.

thanks very much for your help

Thanks very much vishesh I did get the basic idea of now to go along with it. I will have a go with the tutorial.

Thanks again guys

ssharish2005

Member Avatar for roryt

If you would like to know how to get round corners using tables and image, well this is how.
(all sizes are up to you but for the sake of the tutorial...)

Creating the image for the corners

  1. Open your prefered graphics editor and create a new image which is 50px by 50px.
  2. Create a circle and fill it with your desired color.
  3. Create a new layer and drag it to the back and fill it with the background that is on your website.
  4. You will need to save the image as the vector file. eg, .psd or .png or .pspimage
  5. Now you need to crop the top left corner out, so the crop size will be 25px * 25px. Now save this file as a jpeg for the web and close it.
  6. Now open up your vector image that we saved earlier and repeat steps 5 and 6 until you have four corners.

Creating the html using dreamweaver or a wysiwyg editor

  1. Open your choosen web authoring software.
  2. Create a new html page.
  3. Create a table with 3 rows and 3 columns
  4. Set the corner cells as 25px by 25px.
  5. Insert your images into them either as a background image or as a normal image.
  6. You then need to set the full table width to 400px by the height of 400px and set the other widths as follows:
    1. Middle top and middle bottom: height: 25px, width: 350px
    2. Left Middle and right middle: height: 250px. width: 25px
    3. middle middle: height: 350px, width: 350px
  7. You now need to set the background color of the other cells to the same color as your circle was.

I hope this tutorial has been helpful. You can see how mine turned out here:

(unfortunately my server is down at the mo so it will be online by midday (uk) on 22nd dec 2006. :o

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.