Make a curve in Border using CSS [duplicate] - html

Question

This question already has answers here:
Box with Arrow top and Border
(4 answers)
Closed 8 years ago.
I want to make a curve in a border.. Like that when u click on a google apps button A pop-up window is open here is curve which point to the apps.. how to make this see the image..

Answer 1

Use pseudo elements to produce the triangle.
We can give a border to the triangle by using both the before and after pseudo elements - which act as 2 triangles - an outer one - with a color the same as the border color and an inner one - with a slight offset - with a color the same as the background of the widget.
In the following example, the before pseudo element is the 'outer' triangle and the after pseudo elemnt is the 'inner' triangle.
Markup
<p class="triangle-border">This only needs one HTML element.</p>
CSS
.triangle-border {
position: relative;
background: #fff;
border: 1px solid #c2c2c2;
width: 200px;
padding: 15px;
margin: 20px;
border-radius: 3px;
box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}
.triangle-border:before {
content:"";
position: absolute;
top: -10px;
left: 46px;
border-width: 0 10px 10px;
border-style: solid;
border-color: #c2c2c2 rgba(0, 0, 0, 0);
display: block;
width: 0;
}
.triangle-border:after {
content:"";
position: absolute;
top: -8px;
left: 47px;
border-width: 0 9px 9px;
border-style: solid;
border-color: #FFF rgba(0, 0, 0, 0);
display: block;
width: 0;
}
FIDDLE
Source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
There are also generators for this like:
http://ilikepixels.co.uk/drop/bubbler/
http://cssarrowplease.com
http://html-generator.weebly.com/css-speech-bubble-generator.html

Answer 2

The usual method is to add before and after pseudo-elements that create CSS shapes using the border property, positioning them absolutely. If you want to fake a 'border' on the shape itself, you create two duplicate shapes (the before and after elements) with different colours, then offset them with the top or left properties.