?
Solved

Simple div rounded corner example

Posted on 2011-03-10
6
Medium Priority
?
367 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
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
These seven tips can help you create an extraordinary website, one that captivates audiences and has them wanting to return regularly for more. Keep reading to find out what your site is missing and what you need to add!
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month5 days, 7 hours left to enroll

588 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