Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsWeb Design & DevelopmentClient Side ScriptingHTML and CSS right
  Reply to this topic Start new topic
left
Rounded Corners In Css
 right
frank
post Apr 24 2010, 07:59 PM
Post #1


Newbie
*

Group: Members
Posts: 26
Joined: 18-October 07
From: Malaw
Member No.: 1,497
Can any one suggest a way of making rounded corners in css or using javascript gimme the code n all



Attached File(s)
Attached File  war_none.jpg ( 44.94k ) Number of downloads: 186
 
Go to the top of the page 
 
  + Quote Post
lizon
post Apr 24 2010, 09:42 PM
Post #2


Ninja
***

Group: Members
Posts: 289
Joined: 10-February 09
Member No.: 81,548
there's several ways to do it. Depends on exactly your doing with the corners. Is the box that the corners are gong to frame fixed? Or does the box need to be scalable to different sizes? Is this for the body of the website? or is it for a box within the website? Is the background behind the box a solid color, or is it some graphical design? This is important in determining which technique to use.

For example the attached design used 3 techniques to get the desired results. This is an updated version of another person's web design for a company I used to work for. I updated the old code to bring it into compliance to today's standards.
Attached File(s)
Attached File  sample.jpg ( 257.64k ) Number of downloads: 181
 
Go to the top of the page 
 
  + Quote Post
frank
post Apr 24 2010, 10:54 PM
Post #3


Newbie
*

Group: Members
Posts: 26
Joined: 18-October 07
From: Malaw
Member No.: 1,497
its actually for the body of the site, so how did you make yours? some code to start on might help
Go to the top of the page 
 
  + Quote Post
lizon
post Apr 24 2010, 11:27 PM
Post #4


Ninja
***

Group: Members
Posts: 289
Joined: 10-February 09
Member No.: 81,548
If the background to your body is a solid color use these 2 images and this code. This is for a body width of 900 px.If your background is a different color just change the color of the images.

CODE
<style type="text/css">
body{
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    color: #FFFFFF;
}
.header{
    background-image: url(top1.png);
    background-repeat: no-repeat;
    background-position: center top;
}
.footer {
    background-image: url(bottom1.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}
.content{
    background-color: #333333;
}
</style>
<body>
<div class="content">
<div class="header"><p>Hello World</p></div>
<div class="footer"> <p>Goodby World</p></div>
</div>
</body>


This will not work if your background is a graphic or texture. That will require some extra code.
Attached File(s)
Attached File  top1.png ( 175bytes ) Number of downloads: 155
Attached File  bottom1.png ( 186bytes ) Number of downloads: 157
 
Go to the top of the page 
 
  + Quote Post
frank
post Apr 24 2010, 11:34 PM
Post #5


Newbie
*

Group: Members
Posts: 26
Joined: 18-October 07
From: Malaw
Member No.: 1,497
thanks man i think that will do biggrin.gif
Go to the top of the page 
 
  + Quote Post
prototism
post Aug 31 2010, 04:41 AM
Post #6


Newbie
*

Group: Members
Posts: 14
Joined: 3-August 08
From: San Diego
Member No.: 51,938
CSS3, although not officially nor consistently supported by most browsers, has the ability to do rounded corners, along with plenty of other eye catching stuff.

The syntax for rounded corder couldn't get any simpler, either.
CODE
.foo
{
background-color: black;
border-radius: 5px;
}


The above example will create an element with a 5 pixel radius curve on each corner.

You can get a lot more complex too, but I won't go into that here. Check out this link for more details.

http://www.css3.info/preview/rounded-border/

Enjoy,
Matthew
Go to the top of the page 
 
  + Quote Post
IamShipon1988
post Sep 5 2010, 03:26 AM
Post #7


Outrageously Uber Ninja
*******

Group: Moderators
Posts: 1,562
Joined: 19-September 07
From: Rochester, NY
Member No.: 86
prototism - That is not compatible with all browsers. Some users still use IE 6 or older browsers. That means that different users will have different experiences.

You can always try it with one image method. Since it's one image, it cuts down the load time. You can see a sample here: http://www.devinrolsen.com/rounded-corners...-and-one-image/

For other CSS rounded corner techniques, check out this site: DevWebPro
Go to the top of the page 
 
  + Quote Post
noetfd
post Sep 18 2010, 02:36 PM
Post #8


Newbie
*

Group: Members
Posts: 16
Joined: 6-September 10
Member No.: 155,832
I'm trying to do the same thing for my cowboys blog site I saw some youtube videos that showed rounded corners using border-radius and after looking into it more your guys are right you'd have to add dif codes for each dif browser, this is from what I found on tutorials.
this is my code for my site I'm trying to make the "about" a small section on the top of my content div I've only viewed in IE cause which is why i'm only using the border-radius property for now, but still the corners aren't rounded at a radius of 5px..whats wrong with my code?


CODE
#about
{
width:50%;
margin-top:1%;
margin-left:1%;
margin-bottom:1%;
border:1px;
border-style:solid;
border-color:gray;
border-radius:5px;
}
Go to the top of the page 
 
  + Quote Post
lapss321
post Dec 23 2010, 09:01 AM
Post #9


Newbie
*

Group: Members
Posts: 2
Joined: 23-December 10
Member No.: 170,175
thank you, i think that will do
Go to the top of the page 
 
  + Quote Post
nibzxd
post Mar 16 2011, 11:05 PM
Post #10


Newbie
*

Group: Members
Posts: 4
Joined: 16-March 11
Member No.: 182,296
thanks for reply's.. it helped me
Go to the top of the page 
 
  + Quote Post
tabalat
post May 26 2011, 11:04 AM
Post #11


Newbie
*

Group: Members
Posts: 5
Joined: 25-May 11
Member No.: 191,679
try using css3

div{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-o-border-radius:10px;
}

that is css with rounded corners.

Hope this helps.
Go to the top of the page 
 
  + Quote Post
Protego
post May 29 2011, 09:43 AM
Post #12


Newbie
*

Group: Members
Posts: 18
Joined: 25-July 10
Member No.: 150,506
If you are looking for cross-browser compatibility a JavaScript solution would be what you are looking for. Here is a simple jQuery implementation: http://docs.jquery.com/Tutorials:Rounded_Corners
Go to the top of the page 
 
  + Quote Post
creationsweb
post Mar 11 2013, 07:01 AM
Post #13


Newbie
*

Group: Members
Posts: 8
Joined: 9-March 13
Member No.: 276,003
In CSS :
.box1 {
Display:block;
Background:#e5e5e5;
Border-radius: 10px;
Width: 100px;
Height: 400px;
}

In java script:
<head>
&lt;script type=”text/javascript”>
document.getElementById(“box1”).style = #e5e5e5;
</script>
</head>
<body>
<div style=”display:block; width:100px; height:400px;” id=”box1”></div>
</body>
Go to the top of the page 
 
  + Quote Post
« Next Oldest · HTML and CSS · Next Newest »
 
 Reply to this topic Start new topic
left
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
 right
0 Members:
left
Forum Jump
 right
 
Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 22nd May 2013 - 09:51 PM
Powered By IP.Board 2.2.2 © 2013  IPS, Inc.