Jump to content

Rounded Corners


hanwall
 Share

Recommended Posts

Is it possible to make rounded corners with CSS for a container-div or is it just possible using pictures?Then I also wonder if anyone can tell me how to get the background to stay in the same position when scrolling the content (container-div or main-div)? I want the effect to be like the content-divs are lying on top of the background.Anyone? :)

Link to comment
Share on other sites

Is it possible to make rounded corners with CSS for a container-div or is it just possible using pictures?Then I also wonder if anyone can tell me how to get the background to stay in the same position when scrolling the content (container-div or main-div)? I want the effect to be like the content-divs are lying on top of the background.Anyone? :)
It's possible to make round corners without images. I have examples here:http://dtfox-tests.totalh.com/roundcorners.htmlIf you look in the W3Schools CSS referece, you'll find the background-attachment property to keep the background from scrolling.
Link to comment
Share on other sites

  • 1 month later...

That's brilliant. Best example I've seen yet.Now, how would one make separate boxes on the same page in different colors?Here's the code, as to not have to go to the page:

html,body { background-color:#123456; font-family: Georgia,"Times New Roman",Serif; text-align: center; color:#FFFFFF; } .box b, .box i { height: 1px; line-height: 1px; display: block; } .inside, .box b, .box i { background-color: #FFCC66; } .inside { padding: 0 5px; color: white; height: 100%;} .p1 { margin: 0 5px; } .p2 { margin: 0 3px; } .p3 { margin: 0 2px; } .p4 { margin: 0 1px; } .border,i.p1,i.p2,i.p3,i.p4 { border: solid black; border-width: 0 1px; } i.p1 { margin: 0 4px !important; border-width: 0 2px; } .p0 { background-color: black !important; margin: 0 6px; } .box { margin: 5px 0; text-align: left; } .width { margin: 0 auto; height: 300px; width: 300px; text-align: center; padding-bottom: 12px; float:left; }
Here's an example of what I want to make:rnd_crnr_page.gif
Link to comment
Share on other sites

You'll have to assign an extra class to the box:

<div class="box green">...<div class="box red">...<div class="box blue">

And assign a background color with that class:

.green .inside,.green b,.green i {background-color: green;}.red .inside,.red b,.red i {background-color: red;}.blue .inside,.blue b,.blue i {background-color: blue;}

Link to comment
Share on other sites

Maybe I did it wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <title>Round corners</title>        <link href="CSS/rounded_corners.css" rel="stylesheet" type="text/css" />  </head>   <body>     <h1>Round corners without images</h1>     <div class="box">       <b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p4"></b>       <div class="green inside">         A box with round corners and no border      </div>       <b class="p4"></b><b class="p4"></b><b class="p3"></b><b class="p2"></b><b class="p1"></b>     </div>     <div class="box width">       <i class="p0"></i><i class="p1"></i><i class="p2"></i><i class="p3"></i><i class="p4"></i><i class="p4"></i>       <div class="inside border">         A box with round corners and a black border      </div>       <i class="p4"></i><i class="p4"></i><i class="p3"></i><i class="p2"></i><i class="p1"></i><i class="p0"></i>     </div>   </body> </html>

html,body {background-color:#333333;font-family: Georgia,"Times New Roman",Serif;text-align: center;color:#FFFFFF;}.box b, .box i {height: 1px;line-height: 1px;display: block;}/*.inside, .box b, .box i {background-color: red;}*/.green .inside,.green b,.green i {background-color: green;}.red .inside,.red b,.red i {background-color: red;}.blue .inside,.blue b,.blue i{background-color: blue;}.inside {padding: 0 5px; color: white; height: 100%;}.p1 {margin: 0 5px;}.p2{margin: 0 3px;}.p3{margin: 0 2px;}.p4{margin: 0 1px;}.border,i.p1,i.p2,i.p3,i.p4{border: solid white; border-width: 0 1px;}i.p1 {margin: 0 4px !important; border-width: 0 2px;}.p0{background-color: white !important; margin: 0 6px;}.box{margin: 5px 0; text-align: left;}.width {margin: 0 auto;height: 300px;width: 300px;text-align: center;padding-bottom: 12px;float:left;}

I simply get a transparent round corner box with and without a border.

Link to comment
Share on other sites

I think I have to change the p1, p2, etc as well. Seems all this code does is create a series of 'lines' with a left and right border of a color for a bordered box, or no color for a borderless box. So it will end up as p1.green, p2.green, etc.No, that didn't work.

Edited by bigsilk
Link to comment
Share on other sites

You need to assign the "red" class to the <div class="box"> element, not the <i> elements. It makes things easier.This is the code for the box with a border:

<div class="box width red"><i class="p0"></i><i class="p1"></i><i class="p2"></i><i class="p3"></i><i class="p4"></i><i class="p4"></i><div class="inside border">A box with round corners and a black border</div><i class="p4"></i><i class="p4"></i><i class="p3"></i><i class="p2"></i><i class="p1"></i><i class="p0"></i></div>

I apply left and right borders to all the <i> elements and the .inside box. I added the extra "p0" <i> element for the top and bottom borders:

.inside { padding: 0 5px; color: white; height: 100%;}.p1 { margin: 0 5px; }.p2 { margin: 0 3px; }.p3 { margin: 0 2px; }.p4 { margin: 0 1px; }/* Apply borders to elements */.border,i.p1,i.p2,i.p3,i.p4 { border: solid black; border-width: 0 1px; }/* Special case for p1 */i.p1 { margin: 0 4px !important; border-width: 0 2px; }/* The "p0" element, the top and bottom borders */.p0 { background-color: black !important; margin: 0 6px; }/* The "box" element contains everything else */.box { margin: 5px 0; text-align: left; }/* The "width" class just assigns a width and height to the box */.width {  margin: 0 auto;  height: 300px;  width: 300px;  text-align: center;  padding-bottom: 12px;}/* This assigns the background color to the boxYou only need to give the class to the container div */.red .inside,.red b,.red i {background-color: red;}

The .red class is only applied to the container, not to all the rest of the elements: <div class="box red">

Edited by Ingolme
Link to comment
Share on other sites

The red is showing up outside the borders.
Your stylesheet is different than the code I gave you. This is wrong:
.red ,.red b,.red i {background-color: red;}

Delete that from your stylesheet because it is redundant.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...