Is it possible for me to give a rounded right side to a div?

Question

I have a situation in which I'd like to be able to give a slight round to the right side of a div. Is there any CSS wizardy that can achieve this? If so, please demonstrate using this fiddle template: http://jsfiddle.net/z2hejemu/

HTML

<div class="rounded-side">
    <p>This div is by default rectangular in shape. I'd like the right side of it to be rounded, if that's possible. </p>  
</div>

CSS

div.rounded-side {background-color:yellow;padding:10px;}

div.rounded-side > p {font-size: 36px;}

get look at this http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-top-right-radius — Maytham Fahmi, Jan 13 '15 at 23:30
Better source: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius — Reinstate Monica -- notmaynard, Jan 13 '15 at 23:31

Reinstate Monica -- notmaynard · Answer 1 · 2015-01-14T20:10:23.407

To get the semicircle you're looking for, you'll want to take advantage of the scaling requirement dictated by the spec. The key is to use border-radius with equal and very large values (see the fiddle http://jsfiddle.net/gLsd2z4L/ forked off of yours):

div.rounded-side {
    background-color:yellow;
    padding:10px;
    border-radius: 0 100em 100em 0;
}

div.rounded-side > p {font-size: 24px;}

<div class="rounded-side">
    <p>This div is by default rectangular in shape.
       I'd like the right side of it to be rounded, if that's possible. </p>  
</div>

This works because, as described in the spec:

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.

In the example, the total of the radii is 200em; assuming the height (or width, whichever is smaller) of your element is less than this total, the radii will be scaled down proportionally. Since we're choosing equal values for the radii, they will continue to be equal, just reduced. Choosing very large values (i.e., sizes that the element's box will never come close to) forces the browser to do the scaling.

In the link "The curious case of border-radius:50%" posted by Stephen P in a comment on another answer, they suggest using the value 9999px; I used 100em simply because it looks cleaner to me. Unless there's some performance cost with some values/units over others (very doubtful), it shouldn't matter what you use, as long as the radii are equal and their total is larger than the element's size.

Mark Dickson Jr. · Answer 2 · 2015-01-13T23:37:08.737

3

You're just missing border-radius: http://jsfiddle.net/z2hejemu/3/

div.rounded-side {
    background-color:yellow;
    padding:10px; 
    -webkit-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
}

where the border-radius format is (in this case): top-left top-right bottom-right bottom-left

edited Jan 13 '15 at 23:37

answered Jan 13 '15 at 23:28

Mark Dickson Jr.

588
4
10

Whoops. My OP wasn't clear. I want the entire right side to be a semi-circle. – Jan 13 '15 at 23:33
2

Note it's best to [have the unprefixed property last](http://stackoverflow.com/a/7080674/17300). Personally I've stopped using prefixes for border-radius, "too bad" for older browsers. – Stephen P Jan 13 '15 at 23:35
3

@JohnSkeet'sGirlfriend re: _a semi-circle_ — I found [The curious case of border-radius:50%](http://lea.verou.me/2010/10/the-curious-case-of-border-radius50/) to be a helpful article. – Stephen P Jan 13 '15 at 23:39
@StephenP You should make that an answer. I believe it's exactly what OP is looking for. – Reinstate Monica -- notmaynard Jan 13 '15 at 23:59
@iamnotmaynard the point of the article is that 50% can do weird things. It (50%) is useful for circles, but if you, for example, change the `110px` to `50%` in the above `jsfiddle.net/z2hejemu/7` you get an elliptical right side instead of a semi-circle. The article is informative, but not an answer (IMHO) – Stephen P Jan 14 '15 at 00:15

score 2 · Answer 3 · edited Jan 13 '15 at 23:43

2

This code below should solve your issue.

div.rounded-side {
    border-radius:0 20px 20px 0;
}

edited Jan 13 '15 at 23:43

Undo

25,519
37
106
129

answered Jan 13 '15 at 23:29

Pavithra Ashwath

163
8

score 0 · Answer 4 · answered Jan 13 '15 at 23:37

<!DOCTYPE html>
<html>
<head>
<style> 

div 
{
border: 2px solid #a1a1a1;
padding: 10px 40px; 
background: #dddddd;
width: 300px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
-webkit-border-top-right-radius: 2em;
-webkit-border-bottom-right-radius: 2em;
-moz-border-top-right-radius: 2em;
-moz-border-bottom-right-radius: 2em;
}

</style>
</head>
<body>

<div>The border-radius property allows you to add rounded corners to elements.</div>

</body>
</html>

Is it possible for me to give a rounded right side to a div?

4 Answers4