473,581 Members | 2,751 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Simple Rounded Corners on Div

Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

Thanks.

-Ray

Oct 19 '07 #1
8 2160
In article
<11************ *********@i38g2 000prf.googlegr oups.com>,
rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.
You are likely to profit by reading:

http://www.sitepoint.com/article/bre...out-of-the-box

--
dorayme
Oct 19 '07 #2
In article
<do************ *************** *******@news-vip.optusnet.co m.au>,
dorayme <do************ @optusnet.com.a uwrote:
In article
<11************ *********@i38g2 000prf.googlegr oups.com>,
rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.
Perhaps more directly... you might care to adapt

http://www.neuroticweb.com/recursos/css-rounded-box/

to your purposes.

--
dorayme
Oct 19 '07 #3
In article
<do************ *************** *******@news-vip.optusnet.co m.au>,
dorayme <do************ @optusnet.com.a uwrote:
In article
<11************ *********@i38g2 000prf.googlegr oups.com>,
rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

You are likely to profit by reading:

http://www.sitepoint.com/article/bre...out-of-the-box
Sorry about this... forget it. I was looking at it but the more
I see the more it worries me the fixation on pixels...

And about the url to that rounded corner generator, now that I
have time to look closer, you are likely to need to be a bit
handy with image manip programs... that generator at:

http://www.neuroticweb.com/recursos/css-rounded-box/

is actually rather wooden and does not always function correctly.
It does not always change the backgound colour for the little
images reliably!). But it is not a hard thing to get the gifs
right. Now, if you do not want the divs to be too rigid and you
anticipate big variations in size on different users machines,
you may have to em size all the relevant gifs for them to grow
and shrink right. There is no way out but to experiment. But lett
me not say this without doing it myself:
How about this adaptation:

<http://netweaver.com.a u/test/roundCnr/roundCnrExperim ent.html>

Seems to grow and adapt pretty well?

--
dorayme
Oct 19 '07 #4
In article
<do************ *************** *******@news-vip.optusnet.co m.au>,
dorayme <do************ @optusnet.com.a uwrote:
you may have to em size all the relevant gifs
no... again, sorry, these are bg images, but I emmed other
things. I think I need antibiotics, I am crook... Fancy having to
go to the bloody doc and chemist instead of the beach on a day
like this in Sydney.
for them to grow
and shrink right. There is no way out but to experiment. But let
me not say this without doing it myself:
How about this adaptation:

<http://netweaver.com.a u/test/roundCnr/roundCnrExperim ent.html>

Seems to grow and adapt pretty well?
--
dorayme
Oct 19 '07 #5
Dorayme, sounds like you're havin' the same kind of Friday I am! :P

Thanks for the links. I checked 'em out and was impressed by the
generator, but realized that perhaps my rounded boxes aren't as
straight-forward as I thought. My layout calls for a lightly shaded
box with a darker stroke around the edge -- something the generator
can't pull off. I'm not even sure it can be pulled off. But I
appreciate your input.

-Ray

Oct 19 '07 #6
On 2007-10-19, dorayme <do************ @optusnet.com.a uwrote:
[...]
><http://netweaver.com.a u/test/roundCnr/roundCnrExperim ent.html>
This looks doesn't look so good in Firefox.

The problem seems to be that you're setting "font-size: 1px; height:
1em" on the divs that contain the curved bits.

If the font-size is 1px then 1em should be about 1px, so Firefox looks
right to me. But Konqueror and Opera both make those boxes much higher.
Oct 20 '07 #7
On 10/18/07 05:58 pm, rf**@scoe.net wrote:
Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.
None of those myriad appealed to you?
<http://www.html.it/articoli/nifty/index.html>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Oct 20 '07 #8
In article <sl************ *********@bowse r.marioworld>,
Ben C <sp******@spam. eggswrote:
On 2007-10-19, dorayme <do************ @optusnet.com.a uwrote:
[...]
<http://netweaver.com.a u/test/roundCnr/roundCnrExperim ent.html>

This looks doesn't look so good in Firefox.

The problem seems to be that you're setting "font-size: 1px; height:
1em" on the divs that contain the curved bits.

If the font-size is 1px then 1em should be about 1px, so Firefox looks
right to me. But Konqueror and Opera both make those boxes much higher.
Thanks Ben. I was trying to serve up something to help OP and
changed a few things I thought needed more fluid treatment... I
looked in Opera and Camino, you are right, it was bad! Hope it it
better now, I just put the font-size concerned into em without
thinking further about it, it seems to work now.

--
dorayme
Oct 21 '07 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2297
by: meltedown | last post by:
I noticed that the footer menu on the bottom with rounded corners only uses one image of a rounded corner:img/round15_bot.gif This one image seems to be used for all four corners, but that can't be right. How are these corners made ? Here is the part of the css for the footer http://www.blogger.com/profile/12345910 /* Footer
1
3591
by: jimfortune | last post by:
The following Access VBA function creates a string that can be used in a pdf stream to draw or fill a rectangle of a given color with rounded corners: 'Begin code----------- Public Function DrawRoundedRectangle(dblX As Double, dblY As Double, _ dblR As Double, dblW As Double, dblH As Double, _ dblThickness As Double, dblLineR As Double,...
2
7780
by: Dino Buljubasic | last post by:
Hi, I have several panels that holds bunch of controls with information on my forms. My form has background image property set to an image that has borders defining where my panel comes and that border is rounded so when I set my panels border stile to none, the panel appear to have the rounded border (that comes from the forms background...
8
2417
by: TheCornjerker | last post by:
I've been looking into what method I should use to show rounded corners (and I've found a lot). My question is why does Google seems to mostly use the table method with an image in each corner. Granted they do use a transparent gif so they don't need multiple colored gifs, but I thought most developers shun the table rounded corner method. ...
6
5497
by: Schraalhans Keukenmeester | last post by:
I want to achieve the following: A small image in each of the corners of a box, like below: +-------------------------------+ | + | + | + | + | + | +
5
8453
by: Cindy Lee | last post by:
Is there anyway to put rounded corners on the grid views? When I bring it up in the brower I need to have rounded corners. There are some tricks I can do to regular html tables, but is there any tricks for gridview because I want to use the sorting.
1
2550
by: kidelectric | last post by:
The issue I am having is that I would like to be able to drag-and-drop div elements that have rounded corners.* Since these elements will be dynamically created (including background color), I could not use the "standard" rounded corner method of sliced images for the corners (since that would only allow a certain color to match) I tried using...
4
3340
by: PWS | last post by:
I am despertely trying get a DIV to look like a box with rounded corners. I can find load of examples this where the first line of text has the top graphic and the last line of text has the bottom graphic, but all I want to have in my DIV is a TreeView coontrol. Can anyone send some code. PWS
6
10825
by: moondaddy | last post by:
I need to be able to make polygons with rounded corners. This will be to draw group outlines around shapes in a diagramming tool in wpf. all angles in the polygon will be 90 degrees, but somehow I wanted to make the corners a bit rounded (otherwise it will look like an old legacy app). Is this possible in wpf? The reason I wanted to use a...
0
7857
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8299
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7890
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8163
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6545
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3799
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3813
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2297
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1397
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.