School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,404
  • Replies: 825,985
  • Topics: 137,451
  • Snippets: 4,419
  • Tutorials: 1,148
  • Total Online: 1,624
  • Members: 137
  • Guests: 1,487

Welcome to Dream.In.Code
Become an Expert!

Join 300,404 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,624 people online right now. Registration is fast and FREE... Join Now!




round corners

 

round corners
TomVdV

25 Jun, 2009 - 11:44 PM
Post #1

New D.I.C Head
*

Joined: 28 May, 2009
Posts: 32


My Contributions
Hi all,

I’ve a very stupid question.

How to create round corners on my box?
I’ve tried to drop smaller/shorter lines before the box, but it’s difficult to generate a round corner with it.

And I also don’t know how to do it with a picture if I work with DIV

CODE

#box {
    position: absolute;
    top: 71px;
    left: 280px;
    width: 685px;
    height: 627px;
    background-color: green;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 20px;
}
#abovebox3 {
    position: absolute;
    top: 68px;
    left: 283px;
    width: 685px;
    height: 1px;
    background-color: green;
    background-repeat: no-repeat;
}
#abovebox2 {
    position: absolute;
    top: 69px;
    left: 282px;
    width: 685px;
    height: 1px;
    background-color: green;
    background-repeat: no-repeat;
}
#abovebox1 {
    position: absolute;
    top: 70px;
    left: 281px;
    width: 685px;
    height: 1px;
    background-color: green;
    background-repeat: no-repeat;
}
User is offlineProfile CardPM
+Quote Post


firebolt

RE: Round Corners

25 Jun, 2009 - 11:55 PM
Post #2

D.I.C Lover
Group Icon

Joined: 20 Feb, 2009
Posts: 5,463



Thanked: 75 times
Dream Kudos: 1675
My Contributions
Would this help?
http://www.dreamincode.net/forums/showtopic14893.htm
User is offlineProfile CardPM
+Quote Post

TomVdV

RE: Round Corners

26 Jun, 2009 - 01:17 AM
Post #3

New D.I.C Head
*

Joined: 28 May, 2009
Posts: 32


My Contributions
Thanks, it doesn't work for IE6 and IE7, does it works for IE8?
User is offlineProfile CardPM
+Quote Post

firebolt

RE: Round Corners

26 Jun, 2009 - 01:52 AM
Post #4

D.I.C Lover
Group Icon

Joined: 20 Feb, 2009
Posts: 5,463



Thanked: 75 times
Dream Kudos: 1675
My Contributions
Sorry, I misread the tutorial. I dont think it works in IE8. However, I will try and help find the solution smile.gif
User is offlineProfile CardPM
+Quote Post

zippp

RE: Round Corners

26 Jun, 2009 - 02:03 AM
Post #5

New D.I.C Head
*

Joined: 22 Jun, 2009
Posts: 39



Thanked: 4 times
My Contributions
you can creat a box with header, body, footer.

and gathering these 3 together u will get a box with round corners.

the top item must be an image ( i prefer .png) that shows like this

CODE

  ________________
/                  \        (but with round corners) :)



the next will be the body that continues the box and the final one , the footer will be like the header but shown upsidedown.

it's easy to make it in CSS. i had, once, an example. if i`ll find it i`ll post it here.

This post has been edited by zippp: 26 Jun, 2009 - 02:05 AM
User is offlineProfile CardPM
+Quote Post

TomVdV

RE: Round Corners

26 Jun, 2009 - 03:42 AM
Post #6

New D.I.C Head
*

Joined: 28 May, 2009
Posts: 32


My Contributions
QUOTE(zippp @ 26 Jun, 2009 - 10:03 AM) *

you can creat a box with header, body, footer.

and gathering these 3 together u will get a box with round corners.

the top item must be an image ( i prefer .png) that shows like this

CODE

  ________________
/                  \        (but with round corners) :)



the next will be the body that continues the box and the final one , the footer will be like the header but shown upsidedown.

it's easy to make it in CSS. i had, once, an example. if i`ll find it i`ll post it here.


thanks, can I do it in paint? and the picture of footer and header needs to be as width as the box? where can I see the px of a picture at designtime?
Inside the corners I need to fill the picture with the boxcolor en outside the corners, need to fill the corners with the bgcolor af the mainpage? Correct?

This post has been edited by TomVdV: 26 Jun, 2009 - 04:06 AM
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: Round Corners

26 Jun, 2009 - 07:17 AM
Post #7

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
QUOTE
can I do it in paint?

Yes, but there are better program to do it in, like Gimp (Free) or Photoshop.

QUOTE
and the picture of footer and header needs to be as width as the box

Normally, you have the width of the content, banner (header/ top) and footer (bottom) all the same, it just wroks better that way.

QUOTE
where can I see the px of a picture at designtime?

In paint, I don't believe you can, in Gimp it is at the bottom left of the canvas screen.

QUOTE
Inside the corners I need to fill the picture with the boxcolor en outside the corners, need to fill the corners with the bgcolor af the mainpage? Correct?

Inside of the corners needs to be the color you want the rounded rectangle to be, however if you use Gimp or Photoshop you can forget about the outside of the corners as you can set it to transparent, save as .png and have the transparency kept.
User is offlineProfile CardPM
+Quote Post

zippp

RE: Round Corners

27 Jun, 2009 - 12:12 AM
Post #8

New D.I.C Head
*

Joined: 22 Jun, 2009
Posts: 39



Thanked: 4 times
My Contributions
you can search on web, i think i found once a box like that....but that was long time ago.

you can use paint, but i recomand you photoshop cuz you got more image quality.

ps: your body, can be 10px height, it doesn't matter, cuz you can y-repeat it from CSS, and if you add more text to that box, the body of your box will be automatic resized.
(srry for my english happy.gif)

This post has been edited by zippp: 27 Jun, 2009 - 12:13 AM
User is offlineProfile CardPM
+Quote Post

CTphpnwb

RE: Round Corners

27 Jun, 2009 - 06:06 AM
Post #9

D.I.C Lover
Group Icon

Joined: 8 Aug, 2008
Posts: 2,065



Thanked: 151 times
Dream Kudos: 100
Expert In: PHP

My Contributions
Let's not go overboard on supporting IE. The more people that do, the longer MS will continue to flout internet standards. Between -moz and -webkit most browsers are covered until this gets standardized into css:
CODE
    -webkit-border-top-left-radius: 8px 8px;
    -webkit-border-top-right-radius: 8px 8px;
    -webkit-border-bottom-right-radius: 8px 8px;
    -webkit-border-bottom-left-radius: 8px 8px;


User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/7/09 10:33PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month