Rounded Corner Pure CSS Technique

Question

I've been looking at this question on stack - How to style a <select> dropdown with CSS only without JavaScript? and wondering if it is possible to use rounded corners using this technique.

In the examples i've knocked up as a test it's not been possible as the select box seems to be pertrude in the background. I think the technique is decent for getting a reasonable level of control over the styling of the boxes whilst still keeping native OS support which is what i'm after in this instance. If it proves too difficult to use rounded corners in this technique then i'll just drop it.

Heres a nice jsfidle - http://jsfiddle.net/danield770/YvCHW/6/

My css is currently something like this.

.styled-select select {
    background: transparent;
    width: 268px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    height: 28px;
}

.styled-select{
    padding: 0;
    width: 240px;
    height: 28px;
    overflow: hidden;
    background: url(images/drop.png) no-repeat right #fff;
    border: 1px solid #ccc;
}

It's very hard to understand what you're trying to do but are you aware of border-radius ? — Denys Séguret, Jan 20 '13 at 17:16

score 1 · Answer 1 · answered Jan 20 '13 at 17:18

1

Works for me if I simply apply border-radius on it.

.styled-select{
    border-radius: 10px;
}

jsFiddle Demo

answered Jan 20 '13 at 17:18

kapa

75,446
20
155
173

be sure to add browsers prefixes for cross browser ;) – Tom Sarduy Jan 20 '13 at 17:32
@TomSarduy Here is the [browser support table](http://caniuse.com/#feat=border-radius). Only iOS Safari 3.2 and Android Browser 2.1 needs the `-webkit-` prefix. – kapa Jan 20 '13 at 19:24

score 1 · Accepted Answer · answered Jan 20 '13 at 17:19

1

You can use border-radius to add rounded corners. Reference

.styled{
   width: 120px;
   height: 34px;
   overflow: hidden;
   background: url(http://www.stackoverflow.com/favicon.ico) no-repeat 96% #ddd;
   border-radius: 10px;
}

FIDDLE

answered Jan 20 '13 at 17:19

Fee

233
1
9

Rounded Corner Pure CSS Technique

2 Answers2