CSS Div Rounded Corners

Add border to DIV with rounded corners

you need the parent div to hidding overflow

.rounded{
  border-radius: 7px;
  overflow: hidden;
}
.border{
  border-left: 6px solid blue;
  width: 100px;
  height: 70px;
  background: lightgray;
}

<div class="rounded">
<div class="border"></div>
</div>

CSS div rounded corners

Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to 'flash' upon page load.

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 -khtml-border-radius: 10px;
 border-radius: 10px;

This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com

In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.

To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.

Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.

How to make div with round corner totally opaque inside, but colored outside (between round border line and original border-box line)?

You can consider a radial-gradient coloration for your element to achieve this.

Here is an example:

.wrapper {  padding:50px;  display:inline-block;  font-size:0;  background:url(https://picsum.photos/id/1069/1000/800) center/cover;}.wrapper > div {  width:150px;  height:150px;  display:inline-block;  background:    radial-gradient(farthest-side at bottom right,transparent 98%,yellow 100%) top left,    radial-gradient(farthest-side at bottom left ,transparent 98%,yellow 100%) top right,    radial-gradient(farthest-side at top    left ,transparent 98%,yellow 100%) bottom right,    radial-gradient(farthest-side at top    right,transparent 98%,yellow 100%) bottom left;  background-size:30px 30px;  background-repeat:no-repeat;}

<div class="wrapper">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

Make rounded corners for nested div

Your inner content is currently overflowing and is visible. You need to add the CSS property overflow: hidden.

So it will be like:

.coltable {
....
overflow: hidden;
}

In this way no matter how many inner items you add it will always be rounded at the top and bottom.

How to fill part of div with rounded corners?

You can use css linear-gradient.

#a {  border-radius: 15px;  background: linear-gradient(to right, red 50%, blue 50%);  float: left;  padding: 10px;}

<div id="a">AAAAA</div>

Rounded Corners on DIVs with Background Color

In your markup, you have to give border-radius to both #shell and #title so that the #title's sharp corners don't overlap #shell's.

A live example, http://jsfiddle.net/BXSJe/4/

#shell {
  width: 500px;
  height: 300px;
  background: lightGrey;
  border-radius: 6px;
}

#title {
  background: green;
  padding: 5px;
  border-radius: 6px 6px 0 0;
}

<div id="shell">
  <div id="title">TITLE HERE</div>
  <div id="content">Article Content Goes Here</div>
</div>

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 get this rounded corner effect using only CSS?

Use border-radius on the parent + overflow: hidden.

Element with background inside DIV with rounded corners bleeding out

check this code, is this waht are you looking for ?

the overflow: hidden hides whatever passes the .outer_box borders

and padding: 10px; just to makes it look nice.

<!DOCTYPE html>
<html>
  <head>
    <title>Rounded Edges With Background</title>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
      }

      .outer_box {
        width: 500px;
        background: #fff;
        border: 2px solid #000;
        border-radius: 25px;

        overflow: hidden;
      }

      .title {
        width: 100%;
        background: #00f;
        color: #fff;
        margin-top:0;
        background-clip: padding-box;
        
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="outer_box">
      <h1 class="title">Here's a title</h1>
      <p>Here's some content.</p>
    </div>
  </body>
</html>

---

Related Topics