CSS Button:focus Border-radius Square

Introduction

In CSS, buttons are implemented using the button element in HTML and styled using CSS properties. One commonly used styling property for buttons is the border-radius property which is often used for rounded edges, but can also be used to create a square button. When a button is selected or focused, it is usually highlighted to let the user know which element is currently active, and this can be achieved using the :focus pseudo-class.

This article will cover how to create a square button with rounded edges using border-radius, and how to apply the :focus pseudo-class to highlight the button when it is selected.

Creating a Square Button with Rounded Edges

To create a square button with rounded edges, the border-radius property can be set to half of the button's width to create a circular shape, and then set to 0 for the opposing edges to create a square shape. Here is an example of how to apply this to a button element in CSS:

button {
  width: 100px;
  height: 40px;
  border-radius: 20px 0 20px 0;
}

This will create a button with a width of 100px, a height of 40px, and rounded edges on the top and bottom. The border-radius property is set to 20px 0 20px 0, which means the top-left and bottom-right corners will be rounded, while the top-right and bottom-left corners will be square.

Highlighting the Button on :focus

When a button is selected or focused, it is important to highlight it to let the user know where their input is going. This can be achieved using the :focus pseudo-class, which targets an element when it is selected or focused. Here is an example of how to apply the :focus pseudo-class to the button element to highlight it when it is selected:

button:focus {
  outline: none;
  border: 2px solid blue;
}

This will remove the default browser outline and apply a blue border of 2px width to the button when it is selected.

Conclusion

In this article, we covered how to create a square button with rounded edges using the border-radius property in CSS, and how to highlight the button when it is selected using the :focus pseudo-class. By combining these techniques, you can create visually appealing and user-friendly buttons for your website or application.