border curved css - circle with curved end
You can do this using SVG as background:
.bottom-bar { background: #29a7e8; position: absolute; bottom: 0; width: 100%; height: 50px; text-align: center;}
.circle { display: inline-block; position: relative; top: -28px; border-radius: 100%; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15' width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat; width: 60px; height: 60px; margin: 0 1rem;}
<div class="bottom-bar"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div></div>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15' width='64' height='64' fill='#29a7e8'> <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>
Curved end of border-bottom in CSS
This is not possible within default borders, as border-radius
controls the radius around the element, not a single border edge.
I would recommend faking it with a pseudo-element:
div { max-width:50vw; padding-bottom:25px; position:relative;}div:after { content:''; position:absolute; bottom:0; left:0; right:0; background:red; height:20px; border-radius:0 10px 10px 0;}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quippe: habes enim a rhetoribus; Quodsi ipsam honestatem undique pertectam atque absolutam. Duo Reges: constructio interrete. Urgent tamen et nihil remittunt.</div>
Avoid elliptical shape in CSS border-radius
(source: mozilla.org)
Formally, the syntax for the border-radius property accepts 2 values for each corner: a horizontal radius and a vertical radius (separated by a slash). The following line would create an elliptical border-radius similar to the third image above.
border-radius: 10px / 5px;
Usually, we only specify one value. In this case, that value gets used as both the vertical and horizontal radii. The following line would create a circular border-radius similar to the second image above.
border-radius: 10px;
Using Percentages
The Mozilla Developer's Network defines the possible value types for this property as follows:
<length>
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS data types. Negative values are invalid.<percentage>
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
Using a single value to create a circular radius is fine when we're using absolute length
units like pixels or ems, but gets more complicated when we're using percentages. Since the single-value usage of this property is synonymous with using the same value twice, the following two lines are equivalent; however, these would not necessarily create a circular border-radius.
border-radius: 50%;
border-radius: 50%/50%;
These lines say to "create an ellipse or circle whose vertical radius is equal to 50% of the element's height and whose horizontal radius is equal to 50% of the element's width, and use that as the border-radius.". If the element is 200 pixels wide and 100 pixels tall, this results in an ellipse rather than a circle.
Solution
If you want a circular border-radius, the easiest thing to do is to use absolute measurement units (like pixels or ems or anything besides percentage), but sometimes that doesn't fit your use case and you want to use percentages. If you know the aspect-ratio of the containing element, you still can! In the example below, since my element is twice as wide as it is tall, I've scaled the horizontal radius in half.
#rect {
width: 200px;
height: 100px;
background: #000;
border-radius: 25%/50%;
}
<div id="rect"></div>
CSS arc rounded at the ends
http://jsfiddle.net/k6d17fez/1/
Okay, so I ripped off part of this already working solution and added these two blocks of code:
.wrapper::after{
content:'';
display:block;
width:5px;
height:5px;
background:#004466;
border-radius:50%;
position:relative;
left:123px;
z-index:1000;
}
.wrapper .spinner::after{
content:'';
display:block;
width:5px;
height:5px;
background:#004466;
border-radius:50%;
position:relative;
left:118px;
top:-5px;
z-index:1000;
}
It essentially adds two little circles at the ends of the circumference of the pie.
This is what it looks like in Firefox 37.0.1:
This solution may be a little bit “quick and dirty” but it does the job. Of course Canvas is far more suitable for this.
Related Topics
Why Are Nested Anchor Tags Illegal
Adding a Favicon to a Static HTML Page
Maintain Aspect Ratio of Div But Fill Screen Width and Height in Css
Scraping Data from Website Using Vba
Using HTML and Local Images Within Uiwebview
Make Absolute Positioned Div Expand Parent Div Height
Custom HTML Tag Attributes Are Not Rendered by Jsf
How to Create Uneven Rounded Sides on a Div
Css Two Divs Next to Each Other
How to Remove the Arrow from a Select Element in Firefox
Changing Image on Hover With Css/Html
How to Make This Arrow in CSS Only
Inline-Block Boxes Not Fitting in Their Container