How to make a round button with Kendo UI

Background

There are plenty of posts on the web showing you how to make a typical square button with Kendo UI, but I have not seen a post describing how to make a round Kendo button. Since there are no other posts that cover this, I had to learn this through trial and error. If you're using Kendo, it is a good idea to try to use as many native Kendo widgets as possible as these widgets will be incorporated into the chosen Kendo theme. The reasons for this are simple, native Kendo widgets will perform and look the same and inherit the properties of the selected theme.

Border Radius 50% can make nearly every element round, including a normal Kendo button.

Using the border-radius: 50%CSS can make nearly any HTML into a circle. Indeed, it can also make a normal Kendo UI button into a circle. However, on the desktop, Kendo UI's button also has an outline around its buttons, and the bottom part of the outline is larger than the upper part making the button look weird. Let's take a look:

#primaryTextButton {
	height: 35px;
	width: 35px;
	border-radius: 50%;
}
<button id="primaryTextButton" class="k-primary">i</button> looks OK with mobile- but not so good on the desktop.

This button's outline looks weird. It only gets worse when the button becomes smaller.

A different approach

The code below is one method to make a round Kendo UI button widget using inline code. The element can be anything. Here I am using the button to expand the comments for Galaxie Blog, so I am using the id of comment Control. The collapse class is also not important here. What is important is the k-i-sort-desc-sm class, and k-primary. The k-i-sort-desc-sm is the Kendo UI icon that is being displayed, and the k-primary class indicates that the color of the button must be the primary color of the selected theme. The width and height of the button are set by the width and height property, and the border-radius: 50%argument takes the width and height properties to make a circular button image.

<span id="commentControl" class="collapse k-icon k-i-sort-desc-sm k-primary" style="width: 35px; height:35px; border-radius: 50%;"></span>

This Kendo button takes on the primary color of the selected theme, and without the funny outline, it looks much better!