Solved

Simple div rounded corner example

Posted on 2011-03-10
6
345 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
6 Comments
 
LVL 9

Expert Comment

by:Vampireofdarkness
Comment Utility
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
Comment Utility
Is there anything simpler that does-not involve javascript.
0
 
LVL 20

Expert Comment

by:Mark Brady
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 9

Expert Comment

by:McOz
Comment Utility
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
Comment Utility
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
Comment Utility
Here's what it looks like. Rounded corners in google chrome
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now