Creating a Droplet Like Border Effect in CSS

Creating a droplet like border effect in css

Creating an effect like this is definitely possible using CSS3 but you would need more than just the border for that.

In the below sample, I have used a pseudo-element with a radial-gradient background to mimick the border effect shown in question. Depending on which side should have the border, you can tweak the positioning of the pseudo element to achieve the effect.

The sample provided in the answer has the effect for the top border. If you want it for bottom border, you can refer to this sample. The same can be achieved for left/right border also but would need a bit more tweaking.

You can also tweak the background-size property to achieve smaller/larger circles in the border. You can also produce an ellipse pattern instead of a circle in the border by using the keyword ellipse instead of circle in the radial-gradient property value.

Points to note:

Caution: I am adding this answer only to illustrate that this effect is possible to create using just CSS3, but wouldn't recommend it for usage just as yet because of the relatively lesser browser support for radial-gradients. You can use this if all your target browsers support it.
If you need this border effect on all sides, then just pseudo-elements would not be enough. You would need extra elements for each side and then position them as required.
The radial-gradient background could also be directly added to the main div if the border is only required on the top. But positioning/achieving this effect for a bottom border wouldn't be possible with it and hence the use of a pseudo-element.
border-image property can be used to achieve the same effect using just borders but that has even lesser browswer support than radial-gradients (even IE 10 doesn't support it) and hence not recommended/used.
The below code was tested in Firefox, Chrome, Opera and Safari and should also work in IE 10+ as radial-gradients are not supported in IE 9 and less.

.bordered{    position: relative;    height: 75px;    width: 100%;    border-top: 40px solid black;    background: #EEE;    padding-top: 10px;}.bordered:before{    position: absolute;    content: '';    top: 0px;    height: 8px;    width: 100%;    background-size: 12px 12px;    background-position: -5px -3px;    background-image: -webkit-radial-gradient(50% 0%, circle, black 50%, transparent 55%);    background-image: -moz-radial-gradient(50% 0%, circle, black 50%, transparent 55%);    background-image: radial-gradient(circle at 50% 0%, black 50%, transparent 55%);}

<div class="bordered">Lorem Ipsum Dolor Sit Amet</div>

Creating an irregular border with CSS overlapping colours

Using SVG:

You can do this using SVG. I would say it is pretty complex because the approach uses patterns for the repeating circles, a mask with the pattern as its fill to produce the transparent cuts. This mask is then applied to the image to produce the full effect. This in my opinion is the closest to what you want and also has good browser support. It works fine in IE10+, Edge, Firefox, Chrome, Opera and Safari.

There are a couple of points to note though - (1) You would have to somehow get your carousel work with SVG image because otherwise mask will have no effect (2) the radius of circles change as the width of the container change and so you'd either have to use a fixed size container (or) assign width of the container to the viewBox attribute using JS (or find some setting to prevent the radius change from happening, I don't know of any) .

.masked {  position: relative;  height: 175px;  width: 100%;  background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%);  background-size: 51% 100%;  background-repeat: no-repeat;  background-position: 0% 0%, 100% 0%;  padding-top: 100px;}.masked svg {  position: absolute;  top: 0px;  left: 0px;  height: 100px;  width: 100%;}path {  fill: #fff;}image {  mask: url("#mask");}

<div class='masked'>  <svg viewBox='0 0 1200 100' preserveAspectRatio='none'>    <defs>      <pattern id="circles" patternUnits="userSpaceOnUse" width="10" height="100">        <path d="M0,0 L10,0 10,95 A5,5 0 0,0 0,95 L0,0" />      </pattern>      <mask id="mask">        <rect height="100%" width="100%" fill="url(#circles)" />      </mask>    </defs>    <image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" />  </svg>  Lorem Ipsum Dolor Sit Amet...</div>

Making jagged triangle border in CSS

You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.

.header{
    color: white;
    background-color: #2B3A48;
    text-align: center;
}
.header::after {
    content: " ";
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

<div class="header"><h1>This is a header</h1></div>

How can I create a postage stamp border?

You can look at the code here, it does exactly what you want: http://codepen.io/orhanveli/pen/tbGJL

The code from the website:

HTML

<!-- Lets create a CSS3 stamp -->
<div class="stamp">
    <!-- the image -->
    <img src="http://thecodeplayer.com/uploads/media/css3logo.png" />
</div>

CSS

*{margin: 0; padding: 0;}

body {
    background: #B1d202;
    padding: 100px;
    text-align: center;
}

.stamp {
    width: 280px;
    height: 180px;
    display: inline-block;
    padding: 10px;
    background: white;
    position: relative;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
    /*The stamp cutout will be created using crisp radial gradients*/
    background: radial-gradient(
        transparent 0px, 
        transparent 4px, 
        white 4px,
        white
    );

    /*reducing the gradient size*/
    background-size: 20px 20px;
    /*Offset to move the holes to the edge*/
    background-position: -10px -10px;
}
.stamp:after {
    content: '';
    position: absolute;
    /*We can shrink the pseudo element here to hide the shadow edges*/
    left: 5px; top: 5px; right: 5px; bottom: 5px;
    /*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/

  /*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
    /*pushing it back*/
    z-index: -1;
}
/*Some text*/
.stamp:before {
    content: 'CSS3';
    position: absolute;
    bottom: 0; left: 0;
    font: bold 24px arial;
    color: white;
    opacity: 0.75;
    line-height: 100%;
    padding: 20px;
}
.stamp img {

}

How do I create a teardrop in HTML?

SVG approach:

You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn't allow curved shapes.

The following example uses the <path/> element with:

2 quadratic bezier curve commands for the 2 top curves (lines beginning with Q)
1 arc command for the big bottom one (line beginning with A)

<svg width="30%" viewbox="0 0 30 42">  <path fill="transparent" stroke="#000" stroke-width="1.5"        d="M15 3           Q16.5 6.8 25 18           A12.8 12.8 0 1 1 5 18           Q13.5 6.8 15 3z" /></svg>

Wave border in CSS

It's relatively easy to draw a border like that with a couple of pseudo-elements.

First we draw the bottom of the wave:

.wave{  background:    linear-gradient(to right, sandybrown, chocolate);  height: 50px;  position: relative;}.wave::before{  content: "";  position: absolute;  left: 0;  bottom: 0;  right: 0;  background-repeat: repeat;  height: 10px;  background-size: 20px 20px;  background-image:    radial-gradient(circle at 10px -5px, transparent 12px, maroon 13px);}

<div class='wave'></div>

Biscuit pattern like

If you simply use radial-gradient (from transparent to whatever color is your background) in a pseudo element you can achieve a solid result.

.wave{  height: 60px;  position: relative;  background-image:url('http://placehold.it/350x60'); }.wave::before{  content: "";  position: absolute;  left: 0;  bottom: 0;  right: 0;  background-repeat: repeat;  height: 10px;  background-size: 20px 20px;  background-image:    radial-gradient(circle at 10px -5px, transparent 12px, white 13px);}

<div class='wave'></div>

CSS scalloped border for image using radial-gradients

Use the same radial-gradient you have on the top, but here you just rotate it 180 degrees

body {  text-align:center;  background: white;}.top-container {  background: white;  }.container {  position:relative;  background-image: url("http://www.rhapsodazzle.com/flowers.jpg");  height: 100px; padding-top:40px; width: 100%; left: -10px;}.container::before {   position:absolute;  bottom: 0;/*-20px;*/  transform: rotate(180deg); /* added */   left: 0px; width: 100%; content:" ";  background: radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);  /*  radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);*/  background-color: transparent ;   background-size:20px 40px;  height:50px;  background-repeat: repeat-x; background-position: -20px 0px;}.container::after {   position:absolute;  top: 0px;  left: 0px;  width: 100%; content:" "; background:   radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%); background-color: transparent;   background-size:20px 40px;   height:50px; background-repeat: repeat-x; background-position: -25px 0px;}.next-container {  background: white;}

<body>  <div class="top-container">    <p>Top section.</p>  </div>  <div class="container">   <p>Image Section</p>  </div>  <div class="next-container">    <p>Bottom Section</p>  </div></body>

water drop image affect react

You are almost good, simply make the image rotate in the opposite direction by considering another element:

.box {  width:150px;  height:150px;  position:relative;  border-radius:50% 0 50% 50%;  margin:50px;  transform:rotate(-45deg);  overflow:hidden;}.box:before {  content:"";  position:absolute;  top:-20%;  left:-20%;  right:-20%;  bottom:-20%;  background: center/cover;  background-image:inherit;  transform:rotate(45deg);}

<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>

Creating a Droplet Like Border Effect in CSS