?
Solved

Simple div rounded corner example

Posted on 2011-03-10
6
Medium Priority
?
363 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
Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

 
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 2000 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

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!

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

770 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