CODEWITHSUNDEEP
css
sys_debug
sys_debug

Reputation: 4003

CSS rounded box

This is probably a very beginner question but that's what I am in CSS. I have this:

<div id="box">
        SAMPLE TEXT TO DISPLAY IN BOX!
</div>

And the css to this box is in an external sheet (which is correctly linked to the html page):

#box {
border-radius: 28px; 
-moz-border-radius: 28px; 
-webkit-border-radius: 28px; 
border: 5px solid #3B5998;
}

When I try to use the code in my page it just doesn't work! Any idea why? Again sorry if the question is too simple :)

EDIT: The box i used within another div that is center. Here is how its' used:

<div id="center">
    <div id="box">
        Hdadjlsd
    </div>
</div>

and here is the css for center:

#center { 
margin-right:200px;
background-color:white; 
min-height:700px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:700px; /* for IE5.x and IE6 */
}

outside of this tag it works.

EDIT: Screenshot showing the problem as highlighted by chrome. It is showing where the red boxs is now when inspecting elemententer image description here

Upvotes: 1

Views: 327

Answers (4)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

...................... Give to border-radius in your #center id div

as like this

    #center { 
      border-radius:28px 28px 0 0;
-webkit-border-radius:28px 28px 0 0;
-moz-border-radius:28px 28px 0 0;
    }

Demo

Upvotes: 0

Sujanth
Sujanth

Reputation: 621

You can use like these codes;

-moz-box-shadow: 2px 2px 7px #000000;
-webkit-box-shadow: 2px 2px 7px #000000;
 box-shadow: 2px 2px 7px #000000;
-moz-border-radius-topleft: 28px;
-moz-border-radius-topright:28px;
-moz-border-radius-bottomleft:28px;
-moz-border-radius-bottomright:28px;
-webkit-border-top-left-radius:28px;
-webkit-border-top-right-radius:28px;
-webkit-border-bottom-left-radius:28px;
-webkit-border-bottom-right-radius:28px;
border-top-left-radius:28px;
border-top-right-radius:28px;
border-bottom-left-radius:28px;
border-bottom-right-radius:28px;

You can check your CSS codes here

Upvotes: 0

meWantToLearn
meWantToLearn

Reputation: 1700

copy paste this code into your html check whether its working or not . im sure it does if your using chrome :) , if it works then type the css into your html and run it. 

 <html>
  <head>
  <style type="text/css"> 
   div
 {
 border:2px solid #a1a1a1;
 padding:10px 40px; 
 background:#dddddd;
 width:300px;
 border-radius:25px;
 }
 </style>
 </head>
 <body>
 <div>The border-radius property allows you to add rounded corners to elements.</div> 
 </body>
  </html>

Upvotes: 2

sam
sam

Reputation: 405

have you tried including the css inside the page?? general trend is to use such CSS inside the page not as external links.

Upvotes: 0

Related Questions