Solved

Simple div rounded corner example

Posted on 2011-03-10
6
356 Views
Last Modified: 2012-05-11
Hi experts

Using css 2.0 has anybody got a simple example of giving a div rounded corners, after googling it all the examples seem to be ridiculously involved IE: using an image for each corner or using a seperate div for each corner there must be a simpler way.
0
Comment
Question by:dizzycat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 9

Expert Comment

by:Vampireofdarkness
ID: 35099313
A long time ago I used 'nifty cubes' (http://www.html.it/articoli/niftycube/index.html) -- perhaps it can help?
0
 

Author Comment

by:dizzycat
ID: 35099881
Is there anything simpler that does-not involve javascript.
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35100061
Unfortunately no. You either need to use images and CSS to make the corners or some nifty javascript code. Back then there were only hacks to round the corners of divs and if we wanted to have them we have to put up with a page full of crap code to get them. Even then there were no 100% guaranteed way to be cross browser compatible. Sorry there is no magic for you.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:McOz
ID: 35108079
If you don't mind not having 100% cross browser support, check out the border-radius style in CSS3:

http://www.css3.info/preview/rounded-border/

Good luck!
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 500 total points
ID: 35112433
Oh what I meant before was there is no magical cross browser solution. CSS3 like McOz said above is capable but it only works for a few browsers unfortunately but looks very nice. I wrote a tutorial about something unrelated a while back and this is how I styled the instruction div with rounded corners.

#instructions
{
      border      :1px solid #069ff7;
      -moz-border-radius    :10px;
      -webkit-border-radius :10px;
      background  :#f7f8bd;
      font-family :arial;
      padding     :5px;
}


it's the two lines
-moz-border-radius    :10px;
      -webkit-border-radius :10px;

that you need to put into your CSS. Fir other browsers it just shows a normal square edged border so you can use it and it look great for some people. Eventually other browsers will catch up to CSS3
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35112630
Here's what it looks like. Rounded corners in google chrome
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ebay messages api 6 20
Popup write two lines 3 22
Syntax error creating JSON recordset 4 28
Prevent certain words from being typed in a form 6 31
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question