CODEWITHSUNDEEP
htmlcss
acctman
acctman

Reputation: 4349

Curved box into css?

Can this box be created using only css, or at least 90% css with corner pieces, or would it be best to just redesign it?

Upvotes: 1

Views: 166

Answers (5)

Sanooj
Sanooj

Reputation: 2637

.panel {
    background-color: #2B2B2B;
    -webkit-border-radius: 10px; /* CSS3 Property for webkit design engine used browser */
    -moz-border-radius: 10px; /* CSS3 Property for Mozilla */
    -o-border-radius: 10px; /* CSS3 Property for Opera */
    border-radius: 10px; /* CSS3 Property for Modern Browsers */
    padding: 25px;
}

Upvotes: 3

Serdalis
Serdalis

Reputation: 10489

It is very possible, see here

however if you decide to use corner pieces for compatability you can jsut use:

<div id="box">
<div style="clear:both;">
  <div id="topleft" style="float: left;"></div><div></div><div id="topright" style="float: right;"></div>
</div>
<div id="content"></div>
<div style="clear:both;">
  <div id="bottomleft" style="float: left;"></div><div></div><div id="bottomright" style="float: right;"></div>
</div>
</div>

Upvotes: 2

albert
albert

Reputation: 8153

entirely with css. not exact, but very similar http://jsfiddle.net/jalbertbowdenii/EBfbZ/

Upvotes: 2

Gregory Pakosz
Gregory Pakosz

Reputation: 70204

Have a look at SpiffyCorners for example or google for css rounded corners

Upvotes: 2

Nightfirecat
Nightfirecat

Reputation: 11610

You can simply use CSS3:

div{
    border-radius: 5px; /* 5px rounded corner on all corners */
}

If you want to use a more browser-support friendly method, you can use background images, or a method like that that Spiffy Corners provides, using small divs to recreate the effect.

Upvotes: 2

Related Questions