SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border radius problem

    Hi,

    I am trying to create a menu with rounded corners and I have the following code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    	<style type="text/css">
    	body {
    		background: #791919;
    		font-weight: bold;
    		font-family: Arial;
    		text-shadow: 1px 1px 1px #000;
    	}
    	body a {
    		text-decoration: none;
    	}
    	.nav {
    		padding: 8px 0;
    		color: #f9f2e1;
    		background: #6e7044;
    	}
    	.nav a {
    		padding: 8px;
    		background: #828800;
    		color: #f9f2e1;
    		border-top: 2px solid #dcb94f;
    		border-right: 2px solid #dcb94f;
    		border-bottom: 2px solid#dcb94f;
    		border-radius: 0.75em;
    	}
    	.box {
    		margin: 6px 8px;
    		border: 2px solid #dcb94f;
    		border-radius:0.75em
    	}
    	</style>
    	<title>Test</title>
    </head>
    <body>
    	<div class="nav box"><a href="/">Home</a>* About Us</div>
    </body>
    </html>
    The left side of the Home page does not look nice, especially on a mobile browser. How can I make it look perfectly rounded?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Use images instead of border radius. It's not supported everywhere (as you see in mobile).

    To get it rounded more you should just have to increase the values. Although to also solve the mobile issue, I'd just use an image .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, thanks for the suggestion. I would rather have a couple of pixels displaying wrong instead of having more images on my mobile site because of loading speeds.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use following css3 round border proprieties for different browser.

    Firefox - Chrome - Safari
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;

    But this code supported but IE9 only. So you can use image too and supported for all the browser here
    ...kalsey.com/2003/07/rounded_corners_in_css/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •