Home/ Questions/Q 6851813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:17:37+00:00

Can anyone advise on the best cross-browser/device method to style a button with curved

  • 0

Can anyone advise on the best cross-browser/device method to style a button with curved edges that will stretch to the width of its parent element?

The button needs to use background images – I was considering the following code – The button needs to stretch to the width of th 90% outer div – btnContent div will stretch and leftCurve/rightCurve stay the same size width.

<div style="width:90%">
 <div class="leftCurve"></div>
 <div class="btnContent">button 1</div>
 <div class="rightCurve"></div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this method

    <style>
.outerdiv{ width:100%;}
.rightcurve{ background:url(rightcurveimage.png) no-repeat 100% 0; height:20px; padding-right:10px;}
.leftcurve{ background:url(leftcurveimage.png) no-repeat 0 0; width:1%; height:20px; float:left; clear:right;}
.btncenter{ background:url(btncenterimage.png) repeat 0 0; height:20px; float:left; width:99%;}
</style>

<div style="width:100%">
 <div class="rightcurve">
  <div class="leftcurve"></div>
  <div class=btncenter> Button 1</div>
 </div>
</div>

    Note: You have to put leftcurve, and btncenter div into rightcurve div

    • 0