How to Get Multiple Borders with Rounded Corners? CSS

How to make rounded corners in css on different background

You can also achieve that using the :after pseudo element for the top section and bring that element back using z-index so it won't overlap the bottom section.

Here's an example:

.container {
  width: 50%;
  height: 200px;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.top-section {
  flex-grow: 1;
  background-color: #1B2149;
  border-radius: 0 0 0 25px;
  position: relative;
}

.top-section:after {
  content: " ";
  z-index: -1;
  right: 0;
  bottom: -30px;
  height: 30px;
  width: 40px;
  position: absolute;
  background-color: inherit;
}

.bottom-section {
  flex-grow: 1;
  border-radius: 0 25px 0 0;
  background-color: #FFFFFF;
}

<div class="container">
  <div class="top-section"></div>
  <div class="bottom-section"></div>
</div>

How to make round corners to both inside of a box and its border?

Inner border calculations

First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius.

The inner border radius is calculated as the difference of the outer border radius (border-radius) and the border width (border-width) such that

inner border radius = outer border radius - border width

Whenever the border-width is greater than the border-radius, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius, so you'll need to calculate it manually.

In your case:

inner border radius = 6px - 5px = 1px

Your new CSS should be:

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

Simply subtract the border-radius (6px) values from the border-width value (5px) in order to achieve your desired inner-border-radius:

---

Code that works for me

Tested on Firefox 3.x, Google Chrome, and Safari 5.0

 .radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */

---

Adding color overlays in JavaScript

<script type="text/javascript">
    var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

    // insert opacity decreasing code here for hexadecimal

    var header = document.getElementsByTagName('header')[0];
    header.style.backgroundColor = bodyBgColor;
</script>

I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.

---

Applying General Borders

Are you using a separate box <div> for your border through its background property? If so, you'll need to apply border-radius and its vendor specific properties on both the border box and the inner box:

<div id="border-box" style="border-radius: 5px;">
    <div id="inner-box" style="border-radius: 5px;">
    </div>
</div>

A much more efficient way would simply have the inner-box manage its own border:

<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
    <!-- Content -->
</div>

CSS-wise, you could just declare a .rounded-border class and apply it to every box that will have rounded borders:

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

And apply the class to any boxes that will have rounded borders:

<div id="border-box" class="rounded-borders">
    <div id="inner-box" class="rounded-borders">
    </div>
</div>

For a single box element, you'll still be required to declare the border size in order to be shown:

<style type="text/css">
    #inner-box { border: 4px solid blue; }
</style>

<div id="inner-box" class="rounded-borders">
</div>

How to create multiple borders around existing border of circle

You can use a simple border and clip the background to the content-box to create the transparent part in the padding area:

div.circle {  background: rgba(255, 255, 255, .5) content-box;  padding: 10px;  height: 180px;  width: 180px;  box-sizing: border-box;  border-radius: 50%;  margin:10px auto;  border: 10px solid rgba(255, 255, 255, .5);}
body {  background: pink;}

<div class="circle"></div>

How to have multiple borders on div using css

Here is a start from where you can experiment with circle, shadow and border.

Fiddle Demo 1

Fiddle Demo 2 (Changed border/padding for image)

<div class="login-wrapper" ng-controller="loginController">
    <div class="field-wrapper">
        <div class="login-img-wrapper">
            <img src="http://lorempixel.com/output/people-q-c-100-100-9.jpg" />
            <div class="shadow"></div>
        </div>
    </div>
</div>

.login-img-wrapper {
    position: relative;
    height: 150px;
    width: 150px;
    background-color: #eee;
    margin: auto;
    border-bottom: 1px solid #bbb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.login-img-wrapper:after,
.login-img-wrapper:before {
    z-index: -1;
    height: 4px;    
    bottom: -5px;
    left: 6px;
    right: 6px;
    background-color: #eee;
    border-bottom: 1px solid #bbb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    content:" ";
    position: absolute;
}
.login-img-wrapper:after {
    bottom: -3px;
    left: 3px;
    right: 3px;
}
.login-img-wrapper:before {
    box-shadow: 0 0 10px gray;
}

.login-img-wrapper img {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    box-shadow: 0 0 10px gray;
}

.login-img-wrapper .shadow {
    background: linear-gradient(130deg, white 50%, transparent 40%);
    border-radius: 50%;
    opacity: .7;
    z-index: 15;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
}

Update

Using the new CSS clip-path shapes circles, ellipses, and polygons, more advanced masking and shapes can be done, though it still has bad browser support.

Read more about it here: https://css-tricks.com/clipping-masking-css/

For even more advanced clipping/shadowing (and better browser support) I recommend to start using SVG in combination with CSS.

As a start here is some ways to go: Draw a crescent moon using SVG in HTML

how to make rounded or custom border radius css

Here is how you can do it:

#image-header {
  height: 100px;
  width: 500px;
  background: green;
  border-radius: 60% / 20%;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

<div id="image-header"></div>

CSS3 double rounded border, is it possible without 2 divs?

To mimic different color borders you can use box-shadow - http://jsfiddle.net/eXDjL/3/

.genyx_content_full {
    background-color:#f7f7f7;
    border: #fff 1px solid;
    padding: 10px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 0px 1px #dedede;
}

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

---

Related Topics