Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 873 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Rounded Corners Only On One Side Of Input Form?

Thread title: Rounded Corners Only On One Side Of Input Form?
Reply    
    Thread tools Search this thread Display Modes  
09-30-2012, 02:22 AM
#1
BoyWonder is offline BoyWonder
Status: Member
Join date: Mar 2012
Location: Brooklyn, United States
Expertise: Programming
Software: Notepad++
 
Posts: 102
iTrader: 0 / 0%
 

BoyWonder is on a distinguished road

  Old  Rounded Corners Only On One Side Of Input Form?

I was on the youtube home page, and found that the search bar has rounded corners only on one side, even when onfocus. Im not quite sure how this would be styled.

Reply With Quote
09-30-2012, 04:16 PM
#2
Gaz is offline Gaz
Gaz's Avatar
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
 
Posts: 2,097
iTrader: 26 / 100%
 

Gaz will become famous soon enough Gaz will become famous soon enough

Send a message via Skype™ to Gaz

  Old

Code:
input {
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

Reply With Quote
09-30-2012, 04:34 PM
#3
newkid is offline newkid
Status: Junior Member
Join date: Sep 2006
Location:
Expertise: PHP,MySQL, HTML(5), CSS
Software: Photoshop, Sublime Text2,MS VS
 
Posts: 63
iTrader: 1 / 100%
 

newkid is on a distinguished road

Send a message via Skype™ to newkid

  Old

This is not at all difficult. Let's say you have a div and would like to have the left corners (top left and bottom left) to be round and leave the right side as is. In the example style below let us assume that the div's id in question is "content".

HTML Code:
#content {
   border-top-left-radius:8px;
   border-bottom-left-radius:8px;
}
The radius determines how round you want the corners to be. The higher the value the more round it is. Also, the value can be expressed in either px or %. The properties, border-top-right and border-bottom-right are also available.

If you would like all corners to have the same value, there is no need to be redundant by writing each of these. Simple do:

HTML Code:
#content {
   border-radius:8%;
}
However, ensure that it works in other Firefox and other browsers you must use the prefixes -moz-, and -webkit- like so:

HTML Code:
#content {
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
}
So far, about only 5 browsers (Firefox 4 +, Opera, Safari 5+ and IE 9 +) supports these properties.

Furthermore, you may run into situations where these properties may not work at all or not as perfectly cross-browser-wise. To solve this you can use CSS3 PIE. Note that if your page is using JQuery, these properties will work fine and there is no need to use CSS3 PIE at all. Hope this helps!

Reply    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed