PDA

View Full Version : Round Corners CSS Question



ChrisMaricle
Feb 23rd, 2012, 11:03 PM
Hi everybody, I am new to the forums and it so happens I have a question that I could really use some help or advice with on this issue I am having.

I am working on a website for my brothers business and I have setup the layout to the website using CSS but I think it looks too block like/square and I think rounding the corners would look nice but I can not figure out how to do this.

I am new to CSS and strictly doing this to help my brother out with my understanding of things and could really use some help as I am sure this is a very basic question.

I uploaded the index and CSS files on a web server as I realized posting all the source may not display properly in the forum, and I will post the links right below. Much help would be appreciated, thanks!

index.html -- http://class.riverland.edu/chmaricl/framework/index.html

mainstyle.css -- http://class.riverland.edu/chmaricl/framework/assets/mainstyle.css

menu_style.css -- http://class.riverland.edu/chmaricl/framework/assets/menu_style.css

Sammy12
Feb 24th, 2012, 12:50 AM
Hey there Chris,



.rounded-corners {
-webkit-border-radius: 5px; /* chrome/safari */
-moz-border-radius: 5px; /* firefox */
-ms-border-radius: 5px; /* ie10*/
border-radius: 5px; /* rest of the browsers */
}


w3Schools Border-Radius Explained (http://www.w3schools.com/cssref/css3_pr_border-radius.asp)

For your specific website:


#header {
height: 150px;
width: 950px;
background-color: black;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}


for a better result, take out from #container on line 4 of mainstyle.css:



background-color: #CCC;


Sammy12

ChrisMaricle
Feb 24th, 2012, 01:53 AM
Thanks for the quick response Sammy12 and the advice. It did the job perfectly how I wanted and it also made some unnoticed errors surface. I am trying to keep the website code nice and lean.

I am now going to figure out how to do the same for the #footer corners, I kind of jumped right in and made the changes without putting much time thinking what exactly I was doing. Going to go back and look it over now, I just wanted to say thanks for the help!

ChrisMaricle
Feb 24th, 2012, 02:00 AM
This worked fine for me, pretty simple stuff, learning little by little, thanks again Sammy12.

#footer {
height: 25px;
width: 950px;
text-align: center;
background-color: #000;
color: #FFF;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-ms-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}