Creating a custom shape with CSS

Question

I'm trying to create a customised shape with CSS but I can't quite create what I want to achieve. The shape will be representing the selected item on the main navigation which is shown here:

As you can see I have styled the element <a class="selected"> with the CSS property border-radius: 40px 40px 40px 40px; that displays a shape that has a similar appearance to a pill.

However what i am trying to achieve is a shape that has straight top and bottom edges but has rounded left and right sides as shown in the image below: Are there any CSS properties I can apply to achieve this?

enter image description here

IF you would manage to make this in CSS, I will salute you. However, I'm positive it would require CSS3, so IE8 and lower will be pissed about this. I would just use images. — Tim S.
– Tim S., Commented Apr 11, 2013 at 13:16
Looks like a circle and the containing div has its overflow set to hidden. — thgaskell
– thgaskell, Commented Apr 11, 2013 at 13:17

Christoph · Accepted Answer · 2017-06-19 15:03:03Z

13

Take a look at the following css:

div{
    border-radius: 10px / 100%;
}

This hardly known slash notation enables you to use elliptical border radii as you can see in the images of the MDN border-radius Doc.

With the slash notation you can define the vertical and horizontal border-radius like this:

border-radius: [up to 4 horizontal values] / [up to four vertical values];

This means you can define ellipses with different radii for each corner separately (following the normal rules of defining multiple values):

    /*           horizontal values | vertical values   */
    /*              ↓ top-left     |  ↓ top-left       */
    border-radius: 5px 6px 7px 8px / 10px 11px 12px 13px;
    /*             bottom-right ↑  |    bottom-right ↑ */

If you distort the ellipse strongly enough, you can achieve the effect needed for your case.

div{
    background:#bada55;
    color:white;
    font-size:30px;
    font-family:arial, sans-serif;
    padding:10px 20px;
    display:inline-block;
    margin:10px; 
    border-radius: 10px / 90%;
    text-shadow:1px 1px 1px #792;
    box-shadow:inset 1px 1px 1px rgba(70,90,10,.3);
}

<div>sponsorship</div>

JSFiddle

edited Jun 19, 2017 at 15:03

answered Apr 11, 2013 at 13:30

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1554264 Over a year ago

Can I ask what the slash notation with the second value is defining? I understand that the first value is defining the circle radius but what is the / and 100% doing?

Manish Mishra Over a year ago

border-radius: (horizontal radius values) / [radius for all corners];

Christoph Over a year ago

@user1554264 you can imagine border-radius to have two possible radii for each corner. The images in MDN border radius docs explain this pretty well. You can define up to eight values, for each corner a horizontal and a vertical border radius.

Schleis · Accepted Answer · 2013-04-11 13:25:49Z

1

You can do this in css3. This link contains various shapes that you can use http://css-tricks.com/examples/ShapesOfCSS/. I think that you would want to use something similar to "TV Screen"

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

edited Apr 11, 2013 at 13:25

answered Apr 11, 2013 at 13:17

Schleis

44.1k8 gold badges73 silver badges90 bronze badges

2 Comments

James Montagne Over a year ago

I don't see a link in your answer.

user1554264 Over a year ago

May I ask you to include the link you have mentioned?

Collectives™ on Stack Overflow

Creating a custom shape with CSS

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related