How can I show only corner borders?

by

Assuming <div id="content">CONTENT</div> and that CONTENT includes at least one HTML node.

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

Here’s a Fiddle

More Related Contents:

  1. CSS triangle custom border color
  2. Invert rounded corner in CSS?
  3. Control the dashed border stroke length and distance between strokes
  4. How to create multi-color border with CSS?
  5. Border within border CSS
  6. How do CSS triangles work?
  7. Line before and after title over image [duplicate]
  8. Transparent text cut out of background
  9. Any way to declare a size/partial border to a box?
  10. CSS Only Pie Chart – How to add spacing/padding between slices?
  11. CSS transparent curved shape with two rounded sides
  12. How to draw a circle with text in the middle?
  13. CSS: Margin-top when parent’s got no border
  14. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  15. Hover effect : expand bottom border
  16. How does border-image work with linear-gradient?
  17. Outlining and partially filling an SVG Shape
  18. Hexagon shape with CSS3
  19. Is a concave border radius possible?
  20. Align text on slanted line
  21. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  22. Half hexagon shape with one element
  23. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  24. Removing the image border in Chrome/IE9
  25. Transparent hollow or cut out shape in HTML
  26. Creating space between an element and its border
  27. Create wavy borders in CSS for top and bottom borders
  28. Div with cut out edges, border and transparent background
  29. Double curved shape
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment