Using CSS to Create Custom Borders with Just the Corners Showing

Using CSS to create custom borders with just the corners showing

Using one div, and one node for targeting. http://jsfiddle.net/eCEds/2/

HTML:

<div class="blue white1 white"><p>Text</p></div>

CSS:

.blue {position:relative;width:400px;height:300px;}
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
    position:absolute;
    width:80px; height: 80px;
    border-color:blue;
    border-style:solid;
    content: ' ';
}
.blue:before {top:0;left:0;border-width: 4px 0 0 4px}
.blue:after {top:0;right:0;border-width: 4px 4px 0 0}
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}

How to create a border that fully covers the adjacent corners in CSS?

You could draw these with inset shadows and padding :

div {  padding:12px 5px 5px;  width: 40%;  height: 200px;  box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px  gray}

<div></div>

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>

Cut Corners using CSS

If the parent element has a solid color background, you can use pseudo-elements to create the effect:

div {    height: 300px;    background: red;    position: relative;}
div:before {    content: '';    position: absolute;    top: 0; right: 0;    border-top: 80px solid white;    border-left: 80px solid red;    width: 0;}

<div></div>

Square div with border. Only show the corners

we can do this with pseudo elements , check the demo

.box {  width: 200px;  height: 200px;  margin: 15px auto;  background: #999;  position: relative;}.box:before {  position: absolute;  content: "";  width: 30px;  height: 30px;  top: -2px;  left: -2px;  z-index:-1;  border-left: 2px solid red;  border-top: 2px solid red;}.box:after {  position: absolute;  content: "";  width: 30px;  height: 30px;  right: -2px;  bottom: -2px;  z-index:-1;  border-right: 2px solid red;  border-bottom: 2px solid red;}

<div class="box"></div>

Smart way to add corner image to DIV border on all four corners

For a solution that's widely compatible, I think you should use four elements with position: absolute combined with position: relative and negative offsets:

See: http://jsfiddle.net/M4TC5/

@meo's demo using transform: http://jsfiddle.net/M4TC5/2/

(and my demo: http://jsfiddle.net/M4TC5/1/)

That really just shows the concept, you can generate better transform code (that doesn't look slightly "off" in IE) with this tool: http://www.useragentman.com/IETransformsTranslator/

HTML:

<div class="image">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
    <img src="???" />
</div>

CSS:

.image {
    position: relative
}
.corner {
    position: absolute;
    background: url(???);
}
.TL {
    top: -10px;
    left: -10px
}
.TR {
    top: -10px;
    right: -10px
}
.BL {
    bottom: -10px;
    left: -10px
}
.BR {
    bottom: -10px;
    right: -10px
}

rounded corner for bottom border using css

Here you go. You need to add a div and give it a border-bottom. I have changed the HTML and CSS below. You can increase the div's height and width as you like

.footer_line {
  white-space: nowrap;
  margin-top: 12px;
  font-weight: bold;
  padding-bottom: 1px;
  font-size: 36px;
  width: 150px;
  border-radius: 4px !important;
}

.news_let {
  margin-left: 0px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  color: white !important;
  font-size: 21px !important;
  border-bottom: 4px solid #2782dd !important;
  border-radius:4px;
}

<div class="col-md-6">
  <h3 class="footer_line">News Letter
    <div class="news_let"></div>
  </h3><br/>
</div>

---

Related Topics