Solved

Simple div rounded corner example

Posted on 2011-03-10
6
361 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
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 …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

688 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