Using CSS to create custom borders with just the corners showing

Tags: css,css3

Problem :

Here's a CSS brainteaser for you. I want to create a border with just the corners around a text field, like the image below:

I thought about creating 2 rectangle divs, one with blue border and the other white and then overlaying them, but this didn't seem very elegant (e.g. it wouldn't work well if I wanted to vary the background).

Any ideas how else I might do this?


Here's the HTML:

<div class="blue white1 white">text</div>

.blue {

border: blue 4px solid;

Solution :

Using one div, and one node for targeting.


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


.blue {position:relative;width:400px;height:300px;}
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
    width:80px; height: 80px;
    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}

    CSS Howto..

    CSS - How to make a div as wide as a containing child img

    How to Replace the generic css style into empty string using C#

    How to set background texture to 50% of the page in css

    How to use CSS hover inside html-tag?

    How to target and style specific elements using CSS

    how to move image vertically with css [closed]

    How can I be sure that a website is responsive by only looking the code?

    How do I make LessCSS output css which is then uploaded to webserver

    How to make IFrame fill width of screen

    How to adjust the application with equal resolution in different browsers? [closed]

    How to vertically align inline-block divs without vertical spaces using CSS?

    Show 100% of background

    How to create a natural-looking line using css and maybe javascript? [closed]

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    How can I change the color CSS property of an element using jQuery

    How to use css to put an item just above the top of the screen?

    How to make a search bar clippable without pushing down elements, using 2 inputs

    howto create the iPhone Contacts header scroll Effect for html?

    How to make the opposite effect of Hover in css [duplicate]

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How to get content below background-image with z-index of -1?

    How to use not css selector with * in stylesheet

    How to change inline css using jquery in joomla

    new google images how do they float correctly

    How to center in CSS only after specific HTML element?

    How to make a new DOM element to think it resides in a different domain with js and css

    How to change the css of the div that i just created in code

    How to have div fill width and height of browser window and not have the image be streched

    How to utilize CSS only button markup?

    CSS: How to center a bottom-fixed menu