Make TextBox and TextArea (Multiline TextBox) corners round using CSS3

Last Reply 11 months ago By Mudassar

Posted 11 months ago

Is it possible to round the four eldges of a TextBox inside a DataList?

 

<asp:DataList ID="GetUSERPOST" runat="server" OnItemDataBound="GetUSERCOMMENTS2_ItemDataBound" Width="100%">
                        <ItemTemplate>
<asp:DataList ID="GetUSERCOMMENTS2" runat="server" OnItemDataBound="GetUSERCOMMENTS2_ItemDataBound" Width="100%">
                        <ItemTemplate>
  <asp:TextBox ID="txtcommentpost" runat="server" rows="1" cols="20" CssClass="txtbox form-control" placeholder="Reply..."  OnTextChanged="OnTextChanged" MaxLength="500"  TextMode="MultiLine">
</asp:TextBox>




 </ItemTemplate>
                 <FooterTemplate >
                   
                         

                  
                     
                 </FooterTemplate>
                    </asp:DataList>


 </ItemTemplate>
                
                    </asp:DataList>

 

Posted 11 months ago Modified on 11 months ago

This will work only in HTML5 supported browsers.

<style type="text/css">
   textarea, input[type=text]
   {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
</style>
<textarea></textarea>
<br />
<br />
<input type="text" />

Demo