Add outward curving border to elements like this: ◝◟___◞◜

by

From the top of my head: draw bottom half border on the element and draw top-left and top-right borders on positioned pseudo elements.

/* using 4px border, 1em border radius, 1em padding */
nav ul {
  font: medium sans-serif;
  text-align: center;
  padding: 0;
  list-style-type: none;
  border-top: 4px solid;
}
nav li {
  display: inline-block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-radius: 0 0 1em 1em;
  padding: 0 1em 1em;
  position: relative;
  top: 1em;
}
nav li:before,
nav li:after {
  display: none;
  content: "";
  position: absolute;
  top: -1em;
  width: 1em;
  height: 1em;
  margin-top: -4px;
}
nav li:before {
  right: 100%;
  border-top: 4px solid;
  border-right: 4px solid;
  border-top-right-radius: 1em;
}
nav li:after {
  left: 100%;
  border-top: 4px solid;
  border-left: 4px solid;
  border-top-left-radius: 1em;
}
nav li:hover {
  border-color: initial;
}
nav li:hover:before,
nav li:hover:after {
  display: block;
}
<nav>
  <ul>
    <li>Home</li>
    <li>Random</li>
    <li>Blog</li>
    <li>About us</li>
    <li>Contact Us</li>
  </ul>
</nav>

More Related Contents:

  1. Cut Corners using CSS
  2. Element will not stay centered, especially when re-sizing screen
  3. Responsive grid of hexagons
  4. How to create a circle with links on border side
  5. How to create uneven rounded sides on a div?
  6. Shape with a slanted side (responsive)
  7. CSS Cut out circle from a rectangular shape
  8. How to use CSS to surround a number with a circle?
  9. How to make a curved edge hexagon by using CSS
  10. html/css hexagon with image inside
  11. How to draw circle in html page?
  12. Responsive CSS Trapezoid Shape
  13. Hexagon shape with a border/outline
  14. Create a slanted edge to a div [duplicate]
  15. How to bevel the corner of a block div?
  16. Dynamically aligning pseudo element according to parent height
  17. CSS Speech Bubble with Box Shadow
  18. Center Triangle at Bottom of Div
  19. CSS box shadow around a custom shape?
  20. Slanted diagonal line in html or css?
  21. How can I make a 45 degree responsive ribbon with folded corner?
  22. Border with a transparent centred arrow
  23. How can I make a div with irregular shapes with css3 and html5?
  24. Skewed Borders on a Div
  25. Pixelated edge around a CSS Circle with overflow: hidden;
  26. div with triangle at the bottom with background image
  27. Responsive CSS Circles
  28. How to create a triangle in CSS3 using border-radius
  29. How to transform each side of a shape separately?
  30. How to create a ribbon shape in CSS

Leave a Comment